import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import useInjectionZone from './useInjectionZone';

const ListItem = styled.li`
  font-size: ${p => p.theme.main.sizes.fonts.md};

  &::marker {
    color: ${p => p.theme.main.colors.grey};
  }
`;

const InjectionZoneList = ({ area, ...props }) => {
  const compos = useInjectionZone(area);

  if (!compos) {
    return null;
  }

  return (
    <ul>
      {compos.map(compo => (
        <ListItem key={compo.name}>
          <compo.Component {...props} />
        </ListItem>
      ))}
    </ul>
  );
};

InjectionZoneList.propTypes = {
  area: PropTypes.string.isRequired,
};

export default InjectionZoneList;

@@ -148,16 +148,69 @@
 Zone';%0A%0A
+const List = styled.ul%60%0A  list-style-type: none;%0A%60;%0A%0A
 const Li
@@ -288,27 +288,31 @@
   &:
-:marker %7B%0A    color
+before %7B%0A    background
 : $%7B
@@ -343,16 +343,192 @@
 .grey%7D;%0A
+    width: 4px;%0A    height: 4px;%0A    content: '';%0A    position: absolute;%0A    border-radius: 50%25;%0A    margin-left: -$%7Bp =%3E p.theme.main.sizes.margins.sm%7D;%0A    margin-top: 8px;%0A
   %7D%0A%60;%0A%0A
@@ -676,18 +676,20 @@
  (%0A    %3C
-ul
+List
 %3E%0A      
@@ -824,18 +824,20 @@
 %7D%0A    %3C/
-ul
+List
 %3E%0A  );%0A%7D

Fix bullet position in delete content for a locale modal (#9889)