diff --git a/packages/asc-web-components/access-right-select/README.md b/packages/asc-web-components/access-right-select/README.md new file mode 100644 index 0000000000..ff306dfb91 --- /dev/null +++ b/packages/asc-web-components/access-right-select/README.md @@ -0,0 +1,52 @@ +# AccessRightSelect + +### Usage + +```js +import AccessRightSelect from "@appserver/components/AccessRightSelect"; +``` + +```jsx + console.log("selected", option)} + selectedOption={{ + key: "key1", + title: "Room administrator", + description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`, + icon: CrownIcon, + quota: "free", + color: "#20D21F", + }} +/> +``` + +#### Options is an array of objects that contains the following fields: + +- key +- title +- description +- icon +- quota +- color + +##### Example: + +```js + { + key: "key1", + title: "Room administrator", + description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`, + icon: CrownIcon, + quota: "free", + color: "#20D21F", + } +``` + +### Properties + +| Props | Type | Required | Values | Default | Description | +| ---------------- | :------------: | :------: | :----: | :-----: | ------------------------------------------------------------------ | +| `options` | `obj`, `array` | ✅ | - | - | List of options | +| `onSelect` | `obj`, `array` | - | - | - | Will be triggered whenever an AccessRightSelect is selected option | +| `selectedOption` | `obj` | - | - | - | The option that is selected by default | diff --git a/packages/asc-web-components/access-right-select/access-right-select.stories.js b/packages/asc-web-components/access-right-select/access-right-select.stories.js new file mode 100644 index 0000000000..eb13f2a411 --- /dev/null +++ b/packages/asc-web-components/access-right-select/access-right-select.stories.js @@ -0,0 +1,26 @@ +import React from "react"; + +import AccessRightSelect from "./"; +import { data } from "./data"; + +const Wrapper = (props) => ( +
+ {props.children} +
+); + +const Template = (args) => ( + + + +); + +export const Default = Template.bind({}); +Default.args = { + options: data, + selectedOption: data[0], +}; diff --git a/packages/asc-web-components/access-right-select/access-right-select.stories.mdx b/packages/asc-web-components/access-right-select/access-right-select.stories.mdx new file mode 100644 index 0000000000..2af2fe930c --- /dev/null +++ b/packages/asc-web-components/access-right-select/access-right-select.stories.mdx @@ -0,0 +1,55 @@ +import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks"; + +import AccessRightSelect from "./"; +import * as stories from "./access-right-select.stories.js"; + + + +# AccessRightSelect + +Custom access-right-select + + + + + +### Properties + + + +### Import + +```js +import AccessRightSelect from "@appserver/components/access-right-secelt"; +``` + +#### Options is an array of objects that contains the following fields: + +- key +- title +- description +- icon +- quota +- color + +##### Example: + +```js + { + key: "key1", + title: "Room administrator", + description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`, + icon: CrownIcon, + quota: "free", + color: "#20D21F", + } +``` diff --git a/packages/asc-web-components/access-right-select/data.js b/packages/asc-web-components/access-right-select/data.js new file mode 100644 index 0000000000..a88db3eb73 --- /dev/null +++ b/packages/asc-web-components/access-right-select/data.js @@ -0,0 +1,60 @@ +import { + AccessNoneIcon, + CheckRoundIcon, + CommentIcon, + CrownIcon, + EyeIcon, + PencilIcon, + ReviewIcon, +} from "./svg"; + +export const data = [ + { + key: "key1", + title: "Room administrator", + description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`, + icon: CrownIcon, + quota: "free", + color: "#20D21F", + }, + { + key: "key2", + title: "Full access", + description: `Edit, upload, create, view, download, delete files and folders.`, + icon: CheckRoundIcon, + quota: "paid", + color: "#EDC409", + }, + + { key: "key3", isSeparator: true }, + { + key: "key4", + title: "Editing", + description: `Editing, viewing, downloading files and folders, filling out forms.`, + icon: PencilIcon, + }, + { + key: "key5", + title: "Review", + description: `Reviewing, viewing, downloading files and folders, filling out forms.`, + icon: ReviewIcon, + }, + { + key: "key6", + title: "Comment", + description: `Commenting on files, viewing, downloading files and folders, filling out forms.`, + icon: CommentIcon, + }, + { + key: "key7", + title: "Read only", + description: `Viewing, downloading files and folders, filling out forms.`, + icon: EyeIcon, + }, + { + key: "key8", + title: "Deny access", + description: "", + icon: AccessNoneIcon, + }, +]; diff --git a/packages/asc-web-components/access-right-select/index.js b/packages/asc-web-components/access-right-select/index.js new file mode 100644 index 0000000000..6c0a089f5c --- /dev/null +++ b/packages/asc-web-components/access-right-select/index.js @@ -0,0 +1,99 @@ +import React, { useState } from "react"; +import PropTypes from "prop-types"; +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 = ({ options, onSelect, selectedOption, ...props }) => { + const [currentItem, setCurrentItem] = useState(selectedOption); + + function onSelectCurrentItem(e) { + const key = e.currentTarget.dataset.key; + const item = options.find((el) => { + return el.key === key; + }); + if (item) { + setCurrentItem(item); + onSelect && onSelect(item); + } + } + + const formatToAccessRightItem = (data) => { + return ( + <> + {data.map((it) => { + return it.isSeparator ? ( + + ) : ( + + + + + + {it.title} + {it.quota && ( + + )} + + + {it.description} + + + + + ); + })} + + ); + }; + + return ( + + + + + ); +}; + +AccessRightSelect.propTypes = { + /** List of rights */ + options: PropTypes.arrayOf(PropTypes.object).isRequired, + /** Will be triggered whenever an AccessRightSelect is selected option */ + onSelect: PropTypes.func, + /** The option that is selected by default */ + selectedOption: PropTypes.object, +}; + +export default AccessRightSelect; diff --git a/packages/asc-web-components/access-right-select/styled-accessright.js b/packages/asc-web-components/access-right-select/styled-accessright.js new file mode 100644 index 0000000000..3eb31db0ae --- /dev/null +++ b/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, +}; diff --git a/packages/asc-web-components/access-right-select/svg/access none.svg b/packages/asc-web-components/access-right-select/svg/access none.svg new file mode 100644 index 0000000000..5d81143819 --- /dev/null +++ b/packages/asc-web-components/access-right-select/svg/access none.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/asc-web-components/access-right-select/svg/check round.svg b/packages/asc-web-components/access-right-select/svg/check round.svg new file mode 100644 index 0000000000..81fc859d50 --- /dev/null +++ b/packages/asc-web-components/access-right-select/svg/check round.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/asc-web-components/access-right-select/svg/comment.svg b/packages/asc-web-components/access-right-select/svg/comment.svg new file mode 100644 index 0000000000..b489efed13 --- /dev/null +++ b/packages/asc-web-components/access-right-select/svg/comment.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/asc-web-components/access-right-select/svg/crown.svg b/packages/asc-web-components/access-right-select/svg/crown.svg new file mode 100644 index 0000000000..16d88c4a08 --- /dev/null +++ b/packages/asc-web-components/access-right-select/svg/crown.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/asc-web-components/access-right-select/svg/eye.svg b/packages/asc-web-components/access-right-select/svg/eye.svg new file mode 100644 index 0000000000..a45b73b4f2 --- /dev/null +++ b/packages/asc-web-components/access-right-select/svg/eye.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/asc-web-components/access-right-select/svg/index.js b/packages/asc-web-components/access-right-select/svg/index.js new file mode 100644 index 0000000000..fb8f444152 --- /dev/null +++ b/packages/asc-web-components/access-right-select/svg/index.js @@ -0,0 +1,7 @@ +export { default as AccessNoneIcon } from "./access none.svg"; +export { default as CheckRoundIcon } from "./check round.svg"; +export { default as CommentIcon } from "./comment.svg"; +export { default as CrownIcon } from "./crown.svg"; +export { default as EyeIcon } from "./eye.svg"; +export { default as PencilIcon } from "./pencil.svg"; +export { default as ReviewIcon } from "./review.svg"; diff --git a/packages/asc-web-components/access-right-select/svg/pencil.svg b/packages/asc-web-components/access-right-select/svg/pencil.svg new file mode 100644 index 0000000000..7d8fab6901 --- /dev/null +++ b/packages/asc-web-components/access-right-select/svg/pencil.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/asc-web-components/access-right-select/svg/review.svg b/packages/asc-web-components/access-right-select/svg/review.svg new file mode 100644 index 0000000000..b2da6f4a97 --- /dev/null +++ b/packages/asc-web-components/access-right-select/svg/review.svg @@ -0,0 +1,10 @@ + + + + + + + + + +