upd access-right-select

packages/asc-web-components/access-right-select/access-right-select.stories.mdx

@@ -36,7 +36,8 @@ import AccessRightSelect from "@appserver/components/access-right-secelt";
   {
     key: "key1",
     title: "Room administrator",
-    description: "Администрирование комнат, архивирование комнат, приглашение и управление пользователями в комнатах.",
+    description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+    eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
     icon: CrownIcon,
   }
 ```

packages/asc-web-components/access-right-select/data.js

@@ -12,44 +12,60 @@ export const data = [
   {
     key: "key1",
     title: "Room administrator",
-    description:
-      "Администрирование комнат, архивирование комнат, приглашение и управление пользователями в комнатах.",
+    description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`,
     icon: CrownIcon,
   },
   {
     key: "key2",
     title: "Full access",
-    description:
-      "Редактирование, загрузка, создание, просмотр, скачивание, удаление файлов и папок",
+    description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
+      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
+      culpa qui officia deserunt mollit anim id est laborum.`,
     icon: CheckRoundIcon,
   },
 
   { key: "key3", isSeparator: true },
   {
     key: "key4",
     title: "Editing",
-    description:
-      "Редактирование, просмотр, скачивание файлов и папок, заполнение форм",
+    description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+    `,
     icon: PencilIcon,
   },
   {
     key: "key5",
     title: "Review",
-    description:
-      "Рецензирование, просмотр, скачивание файлов и папок, заполнение форм",
+    description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
+    eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
     icon: ReviewIcon,
   },
   {
     key: "key6",
     title: "Comment",
-    description:
-      "Комментирование файлов, просмотр, скачивание файлов и папок, заполнение форм",
+    description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
+    culpa qui officia deserunt mollit anim id est laborum.`,
     icon: CommentIcon,
   },
   {
     key: "key7",
     title: "Read only",
-    description: "Просмотр, скачивание файлов и папок, заполнение форм",
+    description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
+    culpa qui officia deserunt mollit anim id est laborum.`,
     icon: EyeIcon,
   },
   {

packages/asc-web-components/access-right-select/index.js

@@ -1,39 +1,77 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import LinkWithDropdown from "../link-with-dropdown/index.js";
-import AccessRightItem from "./sub-components/access-right-item.js";
+import ComboBox from "../combobox/index.js";
+import DropDownItem from "../drop-down-item/index.js";
+import Badge from "../badge/index.js";
+
+import {
+  StyledAccessRightWrapper,
+  StyledAccessRightIcon,
+  StyledAccessRightDescriptionItem,
+  StyledAccessRightItem,
+  StyledAccessRightItemIcon,
+  StyledAccessRightItemContent,
+  StyledAccessRightItemTitleAndBadge,
+} from "./styled-accessright.js";
 
 const AccessRightSelect = ({ accessRightsList, quotaList, ...props }) => {
   const [currentItem, setCurrentItem] = useState(accessRightsList[6]);
 
   const formatToAccessRightItem = (data) => {
-    return data.map((it) => {
-      const itQuota = quotaList.find((elem) => elem.accessRightKey == it.key);
-      return it.isSeparator
-        ? { ...it }
-        : {
-            key: it.key,
-            children: (
-              <AccessRightItem
-                key={it.key}
-                title={it.title}
-                description={it.description}
-                icon={it.icon}
-                quota={itQuota}
-              />
-            ),
-            onClick: () => setCurrentItem(it),
-          };
-    });
+    return (
+      <>
+        {data.map((it) => {
+          const itQuota = quotaList.find(
+            (elem) => elem.accessRightKey == it.key
+          );
+          return it.isSeparator ? (
+            <DropDownItem isSeparator />
+          ) : (
+            <DropDownItem key={it.key} onClick={() => setCurrentItem(it)}>
+              <StyledAccessRightItem>
+                <StyledAccessRightItemIcon src={it.icon} />
+                <StyledAccessRightItemContent>
+                  <StyledAccessRightItemTitleAndBadge>
+                    {it.title}
+                    {itQuota && (
+                      <Badge
+                        label={itQuota.quota}
+                        backgroundColor={itQuota.color}
+                        fontSize="8px"
+                      />
+                    )}
+                  </StyledAccessRightItemTitleAndBadge>
+                  <StyledAccessRightDescriptionItem>
+                    {it.description}
+                  </StyledAccessRightDescriptionItem>
+                </StyledAccessRightItemContent>
+              </StyledAccessRightItem>
+            </DropDownItem>
+          );
+        })}
+      </>
+    );
   };
 
   return (
-    <div style={{ display: "flex" }}>
-      <img src={currentItem?.icon} style={{ marginRight: "4.18px" }} />
-      <LinkWithDropdown data={formatToAccessRightItem(accessRightsList)}>
-        {currentItem?.title}
-      </LinkWithDropdown>
-    </div>
+    <StyledAccessRightWrapper>
+      <StyledAccessRightIcon src={currentItem?.icon} />
+      <ComboBox
+        advancedOptions={formatToAccessRightItem(accessRightsList)}
+        directionX="left"
+        directionY="bottom"
+        opened
+        noBorder
+        options={[]}
+        scaled={false}
+        selectedOption={{
+          default: true,
+          key: 0,
+          label: currentItem?.title,
+        }}
+        size="content"
+      />
+    </StyledAccessRightWrapper>
   );
 };
 

packages/asc-web-components/access-right-select/styled-accessright.js

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import Base from "../themes/base";
+
+const StyledAccessRightWrapper = styled.div`
+  display: flex;
+`;
+
+const StyledAccessRightIcon = styled.img`
+  margin-right: 4.18px;
+`;
+
+const StyledAccessRightItem = styled.div`
+  width: 424px;
+
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  align-content: center;
+
+  padding: 7px 0px;
+
+  line-height: 16px;
+  font-style: normal;
+`;
+
+const StyledAccessRightDescriptionItem = styled.div`
+  margin: 1px 0px;
+
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  color: #a3a9ae;
+`;
+
+const StyledAccessRightItemIcon = styled.img`
+  margin-right: 8px;
+`;
+
+const StyledAccessRightItemContent = styled.div`
+  width: 100%;
+  white-space: normal;
+`;
+
+const StyledAccessRightItemTitleAndBadge = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+StyledAccessRightItem.defaultProps = { theme: Base };
+export {
+  StyledAccessRightItem,
+  StyledAccessRightDescriptionItem,
+  StyledAccessRightItemIcon,
+  StyledAccessRightItemContent,
+  StyledAccessRightItemTitleAndBadge,
+  StyledAccessRightWrapper,
+  StyledAccessRightIcon,
+};

packages/asc-web-components/link-with-dropdown/index.js

@@ -44,10 +44,11 @@ class LinkWithDropdown extends React.Component {
       this.setIsOpen(this.props.isOpen);
     }
   }
-  // TODO: added new arg - _key
-  onClickDropDownItem = (e, _key) => {
+
+  onClickDropDownItem = (e) => {
     const { key } = e.target.dataset;
-    const item = this.props.data.find((x) => x.key === key || x.key === _key);
+    console.log(e);
+    const item = this.props.data.find((x) => x.key === key);
     this.setIsOpen(!this.state.isOpen);
     item && item.onClick && item.onClick(e);
   };
@@ -117,8 +118,7 @@ class LinkWithDropdown extends React.Component {
               className="drop-down-item"
               key={item.key}
               {...item}
-              // TODO: added item.key
-              onClick={(e) => this.onClickDropDownItem(e, item.key)}
+              onClick={(e) => this.onClickDropDownItem(e)}
               data-key={item.key}
             />
           ))}