bugfix: fix bugs

src/ui/atoms/list/usage.mdx

@@ -195,14 +195,19 @@ Size of list item is controlled by the `component-level` block property not from
     </ListContainer>
   </block.S>
   <block.M>
-    <List
-      variant="primary"
-      list={[
-        { left: <IconInfo />, id: 0, text: 'Red' },
-        { left: <IconInfo />, id: 1, text: 'Green' },
-        { left: <IconInfo />, id: 2, text: 'Blue' },
-      ]}
-    />
+    <ListContainer variant="primary" style={{ width: '100%' }}>
+      {links.map(({ id, content, disabled }) => (
+        <ListItem
+          key={id}
+          as="a"
+          href={`#${id}`}
+          disabled={disabled}
+          text={content}
+          iconRight={<IconInfo />}
+          iconLeft={<IconInfo />}
+        />
+      ))}
+    </ListContainer>
   </block.M>
   <block.L>
     <ListContainer variant="primary" style={{ width: '100%' }}>
@@ -236,14 +241,20 @@ Size of list item is controlled by the `component-level` block property not from
     </ListContainer>
   </block.XL>
   <block.H>
-    <List
-      variant="primary"
-      list={[
-        { left: <IconInfo />, id: 0, text: 'Red' },
-        { left: <IconInfo />, id: 1, text: 'Green' },
-        { left: <IconInfo />, id: 2, text: 'Blue' },
-      ]}
-    />
+    <ListContainer variant="primary" style={{ width: '100%' }} as="ul">
+      {links.map(({ id, content, disabled }) => (
+        <ListItem
+          as="a"
+          disabled={disabled}
+          href={`#${id}`}
+          iconLeft={<IconInfo />}
+          iconRight={<IconInfo />}
+          key={id}
+          text={content}
+          variant="primary"
+        />
+      ))}
+    </ListContainer>
   </block.H>
 </Playground>
 

src/ui/atoms/table/usage.mdx

@@ -87,8 +87,8 @@ To set number of columns pass `columns` prop to the Table component.
         </Tr>
       </Thead>
       <Tbody>
-        {tableRows.map((row) => (
-          <Tr>
+        {tableRows.map((row, key) => (
+          <Tr key={key}>
             {tableHead.map(({ id }) => (
               <Td key={id}>{row[id]}</Td>
             ))}

src/ui/molecules/checkbox/usage.mdx

@@ -71,8 +71,15 @@ Primary variant should be used to focus user attention. The disabled checkbox is
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
       <>
-        <Checkbox checked id="primary" text="Primary" variant="primary" />
-        <Checkbox checked disabled id="disabled" text="Disabled" variant="primary" />
+        <Checkbox checked onChange={change} id="primary" text="Primary" variant="primary" />
+        <Checkbox
+          checked
+          onChange={change}
+          disabled
+          id="disabled"
+          text="Disabled"
+          variant="primary"
+        />
       </>
     )}
   </State>

src/ui/molecules/field/usage.mdx

@@ -55,7 +55,7 @@ or also as a label of group of component, eg checkbox or radiobutton groups.
       onChange={() => console.info('On textarea change')}
       variant="primary"
       overflow="hidden"
-      isDisabled
+      disabled
     />
   </Field>
   <Field label="Label for input">
@@ -81,7 +81,7 @@ Labels and children component can be replaced in row
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
       <Field label="Label of item" row>
-        <Switch isChecked={value} onChange={change} id="roundTwo" variant="primary" />
+        <Switch checked={value} onChange={change} id="roundTwo" variant="primary" />
       </Field>
     )}
   </State>
@@ -98,7 +98,7 @@ or in column variants
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
       <Field label="Label of item">
-        <Switch isChecked={value} onChange={change} id="roundOne" variant="primary" />
+        <Switch checked={value} onChange={change} id="roundOne" variant="primary" />
       </Field>
     )}
   </State>
@@ -116,7 +116,7 @@ Error variant can be used to focus user attention on error.
       onChange={() => console.info('On textarea change')}
       variant="danger"
       overflow="hidden"
-      isDisabled
+      disabled
     />
   </Field>
   <Field label="Input with error" variant="danger">
@@ -131,7 +131,7 @@ Error variant can be used to focus user attention on error.
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
       <Field label="Switch with error">
-        <Switch isChecked={value} onChange={change} id="roundOne" variant="danger" />
+        <Switch checked={value} onChange={change} id="roundOne" variant="danger" />
       </Field>
     )}
   </State>

src/ui/molecules/radio-button/usage.mdx

@@ -49,7 +49,9 @@ Disabled radio button are uneditable. They have less opacity so that they appear
 
 <Playground>
   <State initial={false} change={(i) => !i}>
-    {(value, change) => <RadioButton id="one" checked disabled variant="primary" text="disabled" />}
+    {(value, change) => (
+      <RadioButton id="one" checked disabled variant="primary" text="disabled" onChange={change} />
+    )}
   </State>
 </Playground>