refactor: Rename lane for column

assets/index.js

@@ -4,10 +4,10 @@ import Board from '../src'
 import getUrlParams from './services/getUrlParams'
 
 const board = {
-  lanes: [
+  columns: [
     {
       id: '0206c8d7-4d48-4d97-b867-86fc2d21074d',
-      title: 'Lane Backlog',
+      title: 'Column Backlog',
       cards: [
         {
           id: '0206c8d7-4d48-4d97-b867-86fc2d21075d',
@@ -53,7 +53,7 @@ const board = {
     },
     {
       id: 2,
-      title: 'Lane Doing',
+      title: 'Column Doing',
       cards: [
         {
           id: 9,
@@ -68,8 +68,8 @@ const board = {
 render(
   <Board
     {...getUrlParams()}
-    onLaneRemove={console.log}
-    onLaneRename={console.log}
+    onColumnRemove={console.log}
+    onColumnRename={console.log}
     onCardRemove={console.log}
     initialBoard={board}
   />,

cypress/integration/board.spec.js

@@ -1,25 +1,25 @@
 describe('Board Page', function() {
-  it('renders a board with its lanes and cards', function() {
-    cy.get('[data-testid="lane"]').should('have.length', 2)
-    cy.get('[data-testid="lane"]:eq(0) > div:eq(0)').should('have.text', 'Lane Backlog')
-    cy.get('[data-testid="lane"]:eq(1) > div:eq(0)').should('have.text', 'Lane Doing')
+  it('renders a board with its columns and cards', function() {
+    cy.get('[data-testid="column"]').should('have.length', 2)
+    cy.get('[data-testid="column"]:eq(0) > div:eq(0)').should('have.text', 'Column Backlog')
+    cy.get('[data-testid="column"]:eq(1) > div:eq(0)').should('have.text', 'Column Doing')
 
     cy.get('[data-testid="card"]').should('have.length', 9)
-    cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]').should('have.length', 8)
-    cy.get('[data-testid="lane"]:eq(1) [data-testid="card"]').should('have.length', 1)
+    cy.get('[data-testid="column"]:eq(0) [data-testid="card"]').should('have.length', 8)
+    cy.get('[data-testid="column"]:eq(1) [data-testid="card"]').should('have.length', 1)
 
-    cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 1/)
-    cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 2/)
-    cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 3/)
+    cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 1/)
+    cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 2/)
+    cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 3/)
 
-    cy.get('[data-testid="lane"]:eq(1) [data-testid="card"]:eq(0)').contains(/Card title 9/)
+    cy.get('[data-testid="column"]:eq(1) [data-testid="card"]:eq(0)').contains(/Card title 9/)
   })
 
   describe('about the card moving', () => {
     describe('when the card is not blocked for moving', () => {
-      describe('when the user moves a card in the same lane', () => {
+      describe('when the user moves a card in the same column', () => {
         beforeEach(() => {
-          const firstCardSelector = '[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)'
+          const firstCardSelector = '[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)'
           cy.get(firstCardSelector)
             .trigger('keydown', { keyCode: 32, which: 32 })
             .trigger('keydown', { keyCode: 40, which: 40, force: true })
@@ -29,28 +29,28 @@ describe('Board Page', function() {
             .trigger('keydown', { keyCode: 32, which: 32, force: true })
         })
 
-        it('moves the cards to another position in the same lane', () => {
-          cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]').should('have.length', 8)
-          cy.get('[data-testid="lane"]:eq(1) [data-testid="card"]').should('have.length', 1)
-          cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 2/)
-          cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 3/)
-          cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 1/)
+        it('moves the cards to another position in the same column', () => {
+          cy.get('[data-testid="column"]:eq(0) [data-testid="card"]').should('have.length', 8)
+          cy.get('[data-testid="column"]:eq(1) [data-testid="card"]').should('have.length', 1)
+          cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 2/)
+          cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 3/)
+          cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 1/)
         })
       })
 
-      describe('when the user moves a card from a lane to another lane', () => {
+      describe('when the user moves a card from a column to another column', () => {
         beforeEach(() => {
-          const firstCardSelector = '[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)'
+          const firstCardSelector = '[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)'
           cy.get(firstCardSelector)
             .trigger('keydown', { keyCode: 32, which: 32 })
             .trigger('keydown', { keyCode: 39, which: 39, force: true })
             .wait(500)
             .trigger('keydown', { keyCode: 32, which: 32, force: true })
         })
 
-        it('moves the cards to another lane', () => {
-          cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]').should('have.length', 7)
-          cy.get('[data-testid="lane"]:eq(1) [data-testid="card"]').should('have.length', 2)
+        it('moves the cards to another column', () => {
+          cy.get('[data-testid="column"]:eq(0) [data-testid="card"]').should('have.length', 7)
+          cy.get('[data-testid="column"]:eq(1) [data-testid="card"]').should('have.length', 2)
         })
       })
     })
@@ -60,7 +60,7 @@ describe('Board Page', function() {
 
       describe('when the user tries to move a card', () => {
         beforeEach(() => {
-          const firstCardSelector = '[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)'
+          const firstCardSelector = '[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)'
           cy.get(firstCardSelector)
             .trigger('keydown', { keyCode: 32, which: 32 })
             .trigger('keydown', { keyCode: 40, which: 40, force: true })
@@ -71,51 +71,51 @@ describe('Board Page', function() {
         })
 
         it('does not move the card', () => {
-          cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]').should('have.length', 8)
-          cy.get('[data-testid="lane"]:eq(1) [data-testid="card"]').should('have.length', 1)
-          cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 1/)
-          cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 2/)
-          cy.get('[data-testid="lane"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 3/)
+          cy.get('[data-testid="column"]:eq(0) [data-testid="card"]').should('have.length', 8)
+          cy.get('[data-testid="column"]:eq(1) [data-testid="card"]').should('have.length', 1)
+          cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(0)').contains(/Card title 1/)
+          cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(1)').contains(/Card title 2/)
+          cy.get('[data-testid="column"]:eq(0) [data-testid="card"]:eq(2)').contains(/Card title 3/)
         })
       })
     })
   })
 
-  describe('about the lane moving', () => {
-    describe('when the lane is not blocked for moving', () => {
-      describe('when the user moves a lane to another position', () => {
+  describe('about the column moving', () => {
+    describe('when the column is not blocked for moving', () => {
+      describe('when the user moves a column to another position', () => {
         beforeEach(() => {
-          const firstLane = '[data-testid="lane"]:eq(0) > div:eq(0)'
-          cy.get(firstLane)
+          const firstColumn = '[data-testid="column"]:eq(0) > div:eq(0)'
+          cy.get(firstColumn)
             .trigger('keydown', { keyCode: 32, which: 32 })
             .trigger('keydown', { keyCode: 39, which: 39, force: true })
             .wait(500)
             .trigger('keydown', { keyCode: 32, which: 32, force: true })
         })
 
-        it('moves the lane to the specified position', () => {
-          cy.get('[data-testid="lane"]:eq(0) > div:eq(0)').should('have.text', 'Lane Doing')
-          cy.get('[data-testid="lane"]:eq(1) > div:eq(0)').should('have.text', 'Lane Backlog')
+        it('moves the column to the specified position', () => {
+          cy.get('[data-testid="column"]:eq(0) > div:eq(0)').should('have.text', 'Column Doing')
+          cy.get('[data-testid="column"]:eq(1) > div:eq(0)').should('have.text', 'Column Backlog')
         })
       })
     })
 
-    describe('when the lane is blocked for moving', () => {
-      beforeEach(() => cy.visit('/?disableLaneDrag=true'))
+    describe('when the column is blocked for moving', () => {
+      beforeEach(() => cy.visit('/?disableColumnDrag=true'))
 
-      describe('when the user tries to move a lane', () => {
+      describe('when the user tries to move a column', () => {
         beforeEach(() => {
-          const firstLane = '[data-testid="lane"]:eq(0) > div:eq(0)'
-          cy.get(firstLane)
+          const firstColumn = '[data-testid="column"]:eq(0) > div:eq(0)'
+          cy.get(firstColumn)
             .trigger('keydown', { keyCode: 32, which: 32 })
             .trigger('keydown', { keyCode: 39, which: 39, force: true })
             .wait(500)
             .trigger('keydown', { keyCode: 32, which: 32, force: true })
         })
 
-        it('does not move the lane', () => {
-          cy.get('[data-testid="lane"]:eq(0) > div:eq(0)').should('have.text', 'Lane Backlog')
-          cy.get('[data-testid="lane"]:eq(1) > div:eq(0)').should('have.text', 'Lane Doing')
+        it('does not move the column', () => {
+          cy.get('[data-testid="column"]:eq(0) > div:eq(0)').should('have.text', 'Column Backlog')
+          cy.get('[data-testid="column"]:eq(1) > div:eq(0)').should('have.text', 'Column Doing')
         })
       })
     })

src/components/Board/components/Lane/index.js → src/components/Board/components/Column/index.js

@@ -5,7 +5,7 @@ import Card from './components/Card'
 import CardSkeleton from '../CardSkeleton'
 import withDroppable from '../../../withDroppable'
 
-export const StyledLane = styled.div`
+export const StyledColumn = styled.div`
   height: 100%;
   display: inline-block;
   padding: 15px;
@@ -15,19 +15,19 @@ export const StyledLane = styled.div`
   vertical-align: top;
 `
 
-const DroppableLane = withDroppable(styled.div`
+const DroppableColumn = withDroppable(styled.div`
   min-height: 28px;
 `)
 
-function Lane({ children, index: laneIndex, renderCard, renderLaneHeader, disableLaneDrag, disableCardDrag }) {
+function Column({ children, index: columnIndex, renderCard, renderColumnHeader, disableColumnDrag, disableCardDrag }) {
   return (
-    <Draggable draggableId={`lane-draggable-${children.id}`} index={laneIndex} isDragDisabled={disableLaneDrag}>
-      {laneProvided => (
-        <StyledLane ref={laneProvided.innerRef} {...laneProvided.draggableProps} data-testid='lane'>
-          <div {...laneProvided.dragHandleProps} data-testid='lane-header'>
-            {renderLaneHeader(children)}
+    <Draggable draggableId={`column-draggable-${children.id}`} index={columnIndex} isDragDisabled={disableColumnDrag}>
+      {columnProvided => (
+        <StyledColumn ref={columnProvided.innerRef} {...columnProvided.draggableProps} data-testid='column'>
+          <div {...columnProvided.dragHandleProps} data-testid='column-header'>
+            {renderColumnHeader(children)}
           </div>
-          <DroppableLane droppableId={String(children.id)}>
+          <DroppableColumn droppableId={String(children.id)}>
             {children.cards.length ? (
               children.cards.map((card, index) => (
                 <Card
@@ -42,11 +42,11 @@ function Lane({ children, index: laneIndex, renderCard, renderLaneHeader, disabl
             ) : (
               <CardSkeleton />
             )}
-          </DroppableLane>
-        </StyledLane>
+          </DroppableColumn>
+        </StyledColumn>
       )}
     </Draggable>
   )
 }
 
-export default Lane
+export default Column

src/components/Board/components/Lane/index.spec.js → src/components/Board/components/Column/index.spec.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Lane, { StyledLane } from './'
+import Column, { StyledColumn } from './'
 
-describe('<Lane />', () => {
+describe('<Column />', () => {
   let subject
 
   const renderCard = jest.fn((_, { title }) => <div>{title}</div>)
 
-  const lane = {
+  const column = {
     id: 1,
     title: 'Backlog',
     cards: [
@@ -24,11 +24,11 @@ describe('<Lane />', () => {
     ]
   }
 
-  function mount({ children = lane, ...otherProps } = {}) {
+  function mount({ children = column, ...otherProps } = {}) {
     subject = render(
-      <Lane {...otherProps} renderLaneHeader={() => <div>Backlog</div>} renderCard={renderCard}>
+      <Column {...otherProps} renderColumnHeader={() => <div>Backlog</div>} renderCard={renderCard}>
         {children}
-      </Lane>
+      </Column>
     )
     return subject
   }
@@ -40,32 +40,32 @@ describe('<Lane />', () => {
 
   beforeEach(reset)
 
-  it('renders a lane', () => {
+  it('renders a column', () => {
     expect(mount().container.querySelector('div')).toBeInTheDocument()
   })
 
-  it("renders the lane's header", () => {
+  it("renders the column's header", () => {
     expect(mount().queryByText(/^Backlog$/)).toBeInTheDocument()
   })
 
-  describe("about the lane's card", () => {
+  describe("about the column's card", () => {
     beforeEach(() => mount())
 
-    it('renders the specified cards in the lane ordered by its specified position', () => {
+    it('renders the specified cards in the column ordered by its specified position', () => {
       const cards = subject.queryAllByText(/^Card title/)
       expect(cards).toHaveLength(2)
       expect(cards[0]).toHaveTextContent(/^Card title 1/)
       expect(cards[1]).toHaveTextContent(/^Card title 2/)
     })
 
-    it('calls the "renderCard" passing the lane, the card and whether the card is dragging or not', () => {
-      expect(renderCard).toHaveBeenCalledWith(lane, expect.objectContaining({ id: 1, title: 'Card title 1' }), false)
+    it('calls the "renderCard" passing the column, the card and whether the card is dragging or not', () => {
+      expect(renderCard).toHaveBeenCalledWith(column, expect.objectContaining({ id: 1, title: 'Card title 1' }), false)
     })
   })
 })
 
-describe('<StyledLane />', () => {
-  it('renders a lane', () => {
-    expect(render(<StyledLane />).container.querySelector('div')).toBeInTheDocument()
+describe('<StyledColumn />', () => {
+  it('renders a column', () => {
+    expect(render(<StyledColumn />).container.querySelector('div')).toBeInTheDocument()
   })
 })

src/components/Board/components/ColumnAdder/components/ColumnForm/index.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import styled from 'styled-components'
+import { StyledColumn } from '../../../Column'
+import { when } from '@services/utils'
+
+const StyledColumnForm = styled(StyledColumn)`
+  min-width: 230px;
+
+  form {
+    display: flex;
+    justify-content: space-between;
+  }
+`
+
+function ColumnForm({ onConfirm, onCancel }) {
+  const inputColumnTitle = React.createRef()
+
+  function addColumn(event) {
+    event.preventDefault()
+
+    when(inputColumnTitle.current.value)(onConfirm)
+  }
+
+  return (
+    <StyledColumnForm>
+      <form onSubmit={addColumn}>
+        <input type='text' ref={inputColumnTitle} autoFocus />
+        <button type='submit'>Add</button>
+        <button type='button' onClick={onCancel}>
+          Cancel
+        </button>
+      </form>
+    </StyledColumnForm>
+  )
+}
+
+export default ColumnForm