Web:Components:Add FillingRoleSelector.

packages/components/filling-role-selector/filling-role-selector.stories.js

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import FillingRoleSelector from ".";
+
+export default {
+  title: "Components/FillingRoleSelector",
+  component: FillingRoleSelector,
+};
+
+const Template = ({ props }) => {
+  return (
+    <>
+      <FillingRoleSelector {...props} style={{ width: "20%" }} />
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};

packages/components/filling-role-selector/index.js

@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  StyledFillingRoleSelector,
+  StyledRow,
+  StyledNumber,
+  StyledAddRoleButton,
+  StyledRole,
+} from "./styled-filling-role-selector";
+
+const FillingRoleSelector = (props) => {
+  const { roles } = props;
+
+  const mockRoles = [
+    { id: 1, role: "Employee" },
+    { id: 2, role: "Accountant" },
+    { id: 3, role: "Director" },
+  ];
+
+  const mockColorAddButton = [
+    { id: 1, color: "#FBCC86" },
+    { id: 2, color: "#70D3B0" },
+    { id: 3, color: "#BB85E7" },
+  ];
+
+  const onAddRole = () => {
+    console.log("click onAddRole");
+  };
+
+  return (
+    <StyledFillingRoleSelector {...props}>
+      {mockRoles.map((item, index) => {
+        return (
+          <StyledRow>
+            <StyledNumber>{index + 1}</StyledNumber>
+            <StyledAddRoleButton
+              onClick={onAddRole}
+              color={mockColorAddButton[index].color}
+            />
+            <StyledRole>{item.role}</StyledRole>
+          </StyledRow>
+        );
+      })}
+    </StyledFillingRoleSelector>
+  );
+};
+
+FillingRoleSelector.propTypes = {};
+
+FillingRoleSelector.defaultProps = {};
+
+export default FillingRoleSelector;

packages/components/filling-role-selector/styled-filling-role-selector.js

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import Base from "../themes/base";
+import { AddRoleButton } from "./svg";
+
+const StyledFillingRoleSelector = styled.div``;
+
+const StyledRow = styled.div`
+  height: 48px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const StyledNumber = styled.div`
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+  color: #a3a9ae;
+`;
+
+const StyledAddRoleButton = styled(AddRoleButton)`
+  width: 32px;
+  height: 32px;
+
+  path {
+    fill: ${(props) => props.color};
+  }
+
+  rect {
+    stroke: ${(props) => props.color};
+  }
+`;
+
+const StyledRole = styled.div`
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+`;
+
+StyledFillingRoleSelector.defaultProps = { theme: Base };
+
+export {
+  StyledFillingRoleSelector,
+  StyledRow,
+  StyledNumber,
+  StyledAddRoleButton,
+  StyledRole,
+};

packages/components/filling-role-selector/svg/index.js

@@ -0,0 +1 @@
+export { default as AddRoleButton } from "PUBLIC_DIR/images/add.role.button.react.svg";