feat:#243 add features component

src/components/features/__tests__/__snapshots__/features.test.tsx.snap

@@ -0,0 +1,40 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Features > should render the component 1`] = `
+<DocumentFragment>
+  <ul
+    class="mocked-styled-2 el-features"
+  >
+    <li
+      aria-describedby="tooltip-id-test-static-id"
+      aria-label="Bathrooms"
+      class="mocked-styled-1 el-features-item"
+      data-visible-id="tooltip-id-test-static-id"
+    >
+      <span
+        class="mocked-styled-0 el-features-item-icon"
+      >
+        <span>
+          icon
+        </span>
+      </span>
+      1
+    </li>
+    <li
+      aria-describedby="tooltip-id-test-static-id"
+      aria-label="Bedrooms"
+      class="mocked-styled-1 el-features-item"
+      data-visible-id="tooltip-id-test-static-id"
+    >
+      <span
+        class="mocked-styled-0 el-features-item-icon"
+      >
+        <span>
+          icon
+        </span>
+      </span>
+      2
+    </li>
+  </ul>
+</DocumentFragment>
+`;

src/components/features/__tests__/features.test.tsx

@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react'
+import { Features } from '../features'
+
+describe('Features', () => {
+  it('should render the component', () => {
+    expect(
+      render(
+        <Features>
+          <Features.Item icon={<span>icon</span>} aria-label="Bathrooms">
+            1
+          </Features.Item>
+          <Features.Item icon={<span>icon</span>} aria-label="Bedrooms">
+            2
+          </Features.Item>
+        </Features>,
+      ).asFragment(),
+    ).toMatchSnapshot()
+  })
+})

src/components/features/features.atoms.tsx

@@ -0,0 +1,22 @@
+import { FC, HTMLAttributes, ReactNode } from 'react'
+import { ElFeaturesItem, ElFeaturesItemIcon } from './styles'
+import { useTooltip } from '../tooltip/use-tooltip'
+import { Tooltip } from '../tooltip'
+
+export interface FeaturesItemProps extends HTMLAttributes<HTMLLIElement> {
+  icon: ReactNode
+  children: ReactNode
+  'aria-label': string
+}
+
+export const FeaturesItem: FC<FeaturesItemProps> = ({ icon, children, 'aria-label': ariaLabel, ...props }) => {
+  const { getTooltipProps, getTriggerProps } = useTooltip()
+
+  return (
+    <ElFeaturesItem aria-label={ariaLabel} {...props} {...getTriggerProps()}>
+      <ElFeaturesItemIcon>{icon}</ElFeaturesItemIcon>
+      {children}
+      <Tooltip {...getTooltipProps()} description={ariaLabel} position="top" />
+    </ElFeaturesItem>
+  )
+}

src/components/features/features.mdx

@@ -0,0 +1,27 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks'
+import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
+import * as FeaturesStories from './features.stories'
+
+<Meta of={FeaturesStories} />
+
+# Features
+
+The features component allows users to provide quick details about a property.
+
+The features component has at least one feature item. Each feature item has a representative icon and an alphanumeric value.
+
+<Controls />
+
+## Default
+
+<Canvas of={FeaturesStories.Default} />
+
+<RenderHtmlMarkup of={FeaturesStories.Default} />
+
+## Tooltip support
+
+Use a tooltip on hover to provide more context for the icon's meaning
+
+<Canvas of={FeaturesStories.DisplayTooltip} />
+
+<RenderHtmlMarkup of={FeaturesStories.DisplayTooltip} />

src/components/features/features.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Features } from './features'
+import { Icon } from '../icon'
+import { ElTooltip } from '../tooltip'
+import { ElFeaturesItem, ElFeaturesItemIcon } from './styles'
+
+const meta = {
+  title: 'Components/Features',
+  component: Features,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+  args: {
+    children: null,
+  },
+} satisfies Meta<typeof Features>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: ({}) => (
+    <Features>
+      <Features.Item aria-label="Bedrooms" icon={<Icon icon="bed" />}>
+        1
+      </Features.Item>
+      <Features.Item aria-label="Bathooms" icon={<Icon icon="bath" />}>
+        2
+      </Features.Item>
+      <Features.Item aria-label="Cars" icon={<Icon icon="car" />}>
+        5
+      </Features.Item>
+      <Features.Item aria-label="Areas" icon={<Icon icon="appLauncher" />}>
+        850 sqm
+      </Features.Item>
+    </Features>
+  ),
+}
+
+// NOTE: using `ElTooltip` instead of `Tooltip` is to provide an example of visually hidden content only to this story
+export const DisplayTooltip = {
+  render: ({}) => {
+    return (
+      <Features>
+        <ElFeaturesItem aria-label="Bathrooms">
+          <ElTooltip
+            role="tooltip"
+            data-position="top"
+            style={{ transform: 'translate(-40%, -120%)', maxWidth: '400px' }}
+            aria-live="assertive"
+          >
+            Bathrooms
+          </ElTooltip>
+          <ElFeaturesItemIcon>
+            <Icon icon="bed" />
+          </ElFeaturesItemIcon>
+          1
+        </ElFeaturesItem>
+      </Features>
+    )
+  },
+}

src/components/features/features.tsx

@@ -0,0 +1,19 @@
+import { FC, HTMLAttributes, ReactNode } from 'react'
+import { FeaturesItem } from './features.atoms'
+import { ElFeatures } from './styles'
+
+export interface FeaturesProps extends HTMLAttributes<HTMLUListElement> {
+  children: ReactNode
+}
+
+type FeaturesFC = FC<FeaturesProps> & {
+  Item: typeof FeaturesItem
+}
+
+const Features: FeaturesFC = (props) => {
+  return <ElFeatures {...props} />
+}
+
+Features.Item = FeaturesItem
+
+export { Features }

src/components/features/index.ts

@@ -0,0 +1,3 @@
+export * from './features.atoms'
+export * from './features'
+export * from './styles'

src/components/features/styles.ts

@@ -0,0 +1,35 @@
+import { styled } from '@linaria/react'
+import { ElIcon } from '../icon'
+
+export const ElFeaturesItemIcon = styled.span`
+  color: var(--icon-primary);
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  font-size: var(--size-4);
+`
+
+export const ElFeaturesItem = styled.li`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size-2xs);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-2xs);
+  letter-spacing: var(--letter-spacing-2xs);
+
+  ${ElIcon} {
+    color: inherit;
+    font-size: inherit;
+  }
+`
+
+export const ElFeatures = styled.ul`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  flex-wrap: wrap;
+`

src/index.ts

@@ -63,6 +63,7 @@ export * from './components/tooltip'
 export * from './components/table/table-container'
 export * from './components/table/table-toolbar'
 export * from './components/empty-data'
+export * from './components/features'
 
 export * from './hooks/use-portal'
 export * from './hooks/use-snack'