Skip to content

Commit

Permalink
Merge pull request #5 from dulajkavinda/feature/icon-support
Browse files Browse the repository at this point in the history
feat: custom icon support
  • Loading branch information
dulajkavinda authored Aug 4, 2023
2 parents c0ca428 + 168887f commit f6c5579
Show file tree
Hide file tree
Showing 8 changed files with 62 additions and 6 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "commandk",
"version": "1.3.7",
"version": "1.4.0",
"description": "Command + K to Search.",
"main": "build/index.js",
"module": "build/index.es.js",
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/Modal.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
top: 0;
right: 0;
bottom: 0;
background: rgba(#1e262f, 0.7);
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
Expand Down
4 changes: 3 additions & 1 deletion src/components/Modal/Modal.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from 'react'
import type { Meta, StoryObj } from '@storybook/react'
import Modal from './Modal'
import { DownArrowIcon } from './utils'
import { Group } from './Modal.types'

const meta = {
Expand All @@ -21,7 +23,7 @@ const listA: Group[] = [
sectionName: 'Repositories',
items: [
{
icon: '🗂',
icon: <DownArrowIcon size={14} />,
title: 'How to make a good repo',
url: '/repo',
},
Expand Down
4 changes: 3 additions & 1 deletion src/components/Modal/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,9 @@ const Modal = (props: ModalType) => {
data-testid='modal-box-body-item'
>
<div className='modal-box-body-items-left'>
<div className='modal-box-body-items-icon'>{subItem.icon}</div>
<div data-testid='modal-box-body-items-icon' className='modal-box-body-items-icon'>
{subItem.icon}
</div>
<div className='modal-box-body-items-title'>
{subItem.title.length > 48 ? `${subItem.title.substring(0, 45)}...` : subItem.title}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/Modal.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export interface State {
export type Action = { type: 'arrowUp' } | { type: 'arrowDown' } | { type: 'select'; payload: number }

export interface Item {
icon: string
icon: string | ReactNode
title: string
url?: string
}
Expand Down
37 changes: 37 additions & 0 deletions src/components/Modal/__tests__/Modal.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { screen, render, fireEvent } from '@testing-library/react'
import renderer from 'react-test-renderer'
import Modal from '../Modal'
import { Group } from '../Modal.types'
import { DownArrowIcon } from '../utils'

const list: Group[] = [
{
Expand Down Expand Up @@ -183,4 +184,40 @@ describe('components/Modal', () => {

expect(screen.getByTestId('noresults')).toHaveTextContent('1 Result')
})

it('render a react element passed as an icon', () => {
const listWithReactElement: Group[] = [
{
sectionName: 'Repositories',
items: [
{
icon: <DownArrowIcon size={14} />,
title: 'How to make a good repo',
url: '/repo',
},
{
icon: '🚀',
title: 'This is another one to check',
url: 'https://google.lk',
},
{
icon: '🗂',
title: 'How to make a good repo',
url: '/repo',
},
{
icon: '🚀',
title: 'This is another one to check',
url: 'https://google.lk',
},
],
},
]

render(<Modal data={listWithReactElement} isOpen toggle={() => null} />)

const icon = screen.getAllByTestId('modal-box-body-items-icon')[0]

expect(icon).toContainElement(screen.getByTestId('down-arrow-icon-14'))
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ exports[`components/Modal renders modal 1`] = `
className="modal-box-header-search-right-icon"
>
<svg
data-testid="down-arrow-icon-18"
height={18}
viewBox="0 0 14 14"
width={18}
Expand Down Expand Up @@ -136,6 +137,7 @@ exports[`components/Modal renders modal 1`] = `
>
<div
className="modal-box-body-items-icon"
data-testid="modal-box-body-items-icon"
>
🗂
</div>
Expand Down Expand Up @@ -203,6 +205,7 @@ exports[`components/Modal renders modal 1`] = `
>
<div
className="modal-box-body-items-icon"
data-testid="modal-box-body-items-icon"
>
🚀
</div>
Expand Down Expand Up @@ -279,6 +282,7 @@ exports[`components/Modal renders modal 1`] = `
>
<div
className="modal-box-body-items-icon"
data-testid="modal-box-body-items-icon"
>
🏋️‍♀️
</div>
Expand Down Expand Up @@ -346,6 +350,7 @@ exports[`components/Modal renders modal 1`] = `
>
<div
className="modal-box-body-items-icon"
data-testid="modal-box-body-items-icon"
>
📸
</div>
Expand Down Expand Up @@ -422,6 +427,7 @@ exports[`components/Modal renders modal 1`] = `
>
<div
className="modal-box-body-items-icon"
data-testid="modal-box-body-items-icon"
>
🏋️‍♀️
</div>
Expand Down Expand Up @@ -489,6 +495,7 @@ exports[`components/Modal renders modal 1`] = `
>
<div
className="modal-box-body-items-icon"
data-testid="modal-box-body-items-icon"
>
📸
</div>
Expand Down Expand Up @@ -556,6 +563,7 @@ exports[`components/Modal renders modal 1`] = `
>
<div
className="modal-box-body-items-icon"
data-testid="modal-box-body-items-icon"
>
🏋️‍♀️
</div>
Expand Down Expand Up @@ -623,6 +631,7 @@ exports[`components/Modal renders modal 1`] = `
>
<div
className="modal-box-body-items-icon"
data-testid="modal-box-body-items-icon"
>
📸
</div>
Expand Down
8 changes: 7 additions & 1 deletion src/components/Modal/utils/DownArrowIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,13 @@ interface DownArrowIconAttributes {

const DownArrowIcon: React.FC<DownArrowIconAttributes> = ({ size = 18 }) => {
return (
<svg xmlns='http://www.w3.org/2000/svg' width={size} height={size} viewBox='0 0 14 14'>
<svg
data-testid={`down-arrow-icon-${size}`}
xmlns='http://www.w3.org/2000/svg'
width={size}
height={size}
viewBox='0 0 14 14'
>
<g transform='rotate(180 7 7)'>
<g fill='none' stroke='#707680' strokeLinecap='round' strokeLinejoin='round'>
<rect width='13' height='13' x='.5' y='.5' rx='1' />
Expand Down

0 comments on commit f6c5579

Please sign in to comment.