Package lock removed

packages/ui/src/atoms/StateItem.md

-State Item
+An interactive element which upon click changes its text content. The available text values should be provided as an array of strings. The actual operation which takes place is a right shift on the array of provided values
 
 ```js
-const data =
-  {
-    values:['To Clean', 'Cleaning', 'Cleaned'],
-    index: 0,
-    disabled: false,
-    name: 'clean',
-  };
+const data = {
+  values: ['To Clean', 'Cleaning', 'Cleaned'],
+  index: 0,
+  disabled: false,
+  name: 'clean',
+}
 
-const update = (value) => {
+const update = value => {
   console.log('value', value)
-};
+}
 
-<StateItem
+;<StateItem
   values={data.values}
   disabled={data.disabled}
   update={update}

packages/ui/src/molecules/StateList.md

-State List
+A list of State Items separated by a delimiter.
 
 ```js
 const current = {

packages/ui/test/StateItem.test.js

@@ -18,21 +18,16 @@ const wrapper = shallow(<StateItem {...props} />)
 const wrapperRendered = render(<StateItem {...props} />)
 
 describe('StateItem', () => {
-  test('Snapshot', () => {
+  test('is rendered correctly', () => {
     const tree = renderer.create(<StateItem {...props} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('it should be a span', () => {
-    expect(wrapper.is('span')).toBeTruthy()
-    expect(wrapper).toHaveLength(1)
-  })
-
   test('with default props class disabled should not exist', () => {
     expect(wrapper.is('.disabled')).toBe(false)
   })
 
-  test('State Item should be disabled', () => {
+  test('with given props should be disabled', () => {
     const newProps = clone(props)
     newProps.disabled = true
     const newWrapper = shallow(<StateItem {...newProps} />)
@@ -40,11 +35,11 @@ describe('StateItem', () => {
     expect(newWrapper.is('.disabled')).toBe(true)
   })
 
-  test('it should render the value Cleaning', () => {
+  test('should render the value Cleaning', () => {
     expect(wrapperRendered.text()).toEqual(props.values[props.index])
   })
 
-  test('update is triggered', () => {
+  test('update method should be triggered upon click', () => {
     wrapper.simulate('click')
     expect(wrapper.instance().props.update).toHaveBeenCalled()
   })

packages/ui/test/StateList.test.js

@@ -19,31 +19,28 @@ const stateValues = {
   style: ['To Style', 'Styling', 'Styled'],
 }
 
-const myMock = jest.fn()
-
 const props = {
   currentValues,
   values: stateValues,
-  update: myMock,
+  update: () => null,
 }
 const wrapper = shallow(<StateList {...props} />)
 const stateItems = wrapper.find(StateItem)
 
-describe('StateItem', () => {
-  test('Snapshot', () => {
+describe('StateList', () => {
+  test('is rendered correctly', () => {
     const tree = renderer.create(<StateList {...props} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('it should contain four State Item children', () => {
+  test('should contain four State Item children', () => {
     const itemsNumber = Object.keys(stateValues).length
 
-    expect(wrapper.is('div')).toBeTruthy()
-    expect(wrapper.children()).toHaveLength(itemsNumber)
+    expect(stateItems.exists()).toEqual(true)
     expect(stateItems).toHaveLength(itemsNumber)
   })
 
-  test('State Item get the correct props', () => {
+  test('gets the correct props', () => {
     let i = 0
     const stateItemComp = stateItems.getElements()
 

packages/ui/test/__snapshots__/StateItem.test.js.snap

@@ -12,3 +12,16 @@ exports[`StateItem Snapshot 1`] = `
   Cleaning
 </span>
 `;
+
+exports[`StateItem is rendered correctly 1`] = `
+<span
+  className="root"
+  disabled={false}
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex="0"
+>
+  Cleaning
+</span>
+`;

packages/ui/test/__snapshots__/StateList.test.js.snap

@@ -110,3 +110,114 @@ exports[`StateItem Snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`StateList is rendered correctly 1`] = `
+<div
+  className="stateListContainer"
+>
+  <div
+    className="itemContainer"
+  >
+    <span
+      className="root"
+      disabled={false}
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      To Clean
+    </span>
+    <svg
+      className="delimiter"
+      fill="none"
+      height={16}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="9 18 15 12 9 6"
+      />
+    </svg>
+  </div>
+  <div
+    className="itemContainer"
+  >
+    <span
+      className="root"
+      disabled={false}
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      To Edit
+    </span>
+    <svg
+      className="delimiter"
+      fill="none"
+      height={16}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="9 18 15 12 9 6"
+      />
+    </svg>
+  </div>
+  <div
+    className="itemContainer"
+  >
+    <span
+      className="root"
+      disabled={false}
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      To Review
+    </span>
+    <svg
+      className="delimiter"
+      fill="none"
+      height={16}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="9 18 15 12 9 6"
+      />
+    </svg>
+  </div>
+  <div
+    className="itemContainer"
+  >
+    <span
+      className="root"
+      disabled={false}
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      To Style
+    </span>
+  </div>
+</div>
+`;