feat: add Settings component

gravity-ui · Oct 31, 2022 · b7ad550 · b7ad550
1 parent 8d0acb5
commit b7ad550
Show file tree

Hide file tree

Showing 14 changed files with 1,200 additions and 1 deletion.
diff --git a/assets/icons/gear.svg b/assets/icons/gear.svg
diff --git a/src/components/Settings/README.md b/src/components/Settings/README.md
@@ -0,0 +1,92 @@
+### Settings
+
+The components provides layouting functionality of settings panel with the following features:
+
+- single-level and two-level grouping of items
+- filtering of the panel's content by headers of items
+- displaying of loading status and content
+
+### PropTypes
+
+#### Settings
+
+| Property       | Type     | Required | Default | Description                                |
+| :------------- | :------- | :------: | :------ | :----------------------------------------- |
+| loading        | boolean  |          |         | Flag of loading status                     |
+| renderLoading  | Function |          |         | content for loading status                 |
+| renderNotFound | Function |          |         | Empty panel content                        |
+| initialPage    | string   |          |         | Inititial page in `/groupId/pageId` format |
+| onPageChange   | Function |          |         | Page change handler                        |
+
+#### Settings.Group
+
+| Property   | Type   | Required | Default | Description        |
+| :--------- | :----- | :------: | :------ | :----------------- |
+| id         | string |          |         | Unique id of group |
+| groupTitle | string |   true   |         | Header of group    |
+
+#### Settings.Page
+
+| Property | Type      | Required | Default | Description                  |
+| :------- | :-------- | :------: | :------ | :--------------------------- |
+| id       | string    |          |         | Unique id of page in a group |
+| title    | string    |   true   |         | Title of page                |
+| icon     | IconProps |   true   |         | Properties of icon of page   |
+
+#### Settings.Section
+
+| Property  | Type      | Required | Default | Description                  |
+| :-------- | :-------- | :------: | :------ | :--------------------------- |
+| title     | string    |   true   |         | Title of section             |
+| header    | ReactNode |          |         | Header of section            |
+| withBadge | boolean   |          |         | Рисует бэйдж у секции и меню |
+
+#### Settings.Item
+
+| Property             | Type            | Required | Default  | Description      |
+| :------------------- | :-------------- | :------: | :------- | :--------------- |
+| title                | string          |   true   |          | Title of item    |
+| renderTitleComponent | Function        |          |          | Cusomt header of |
+| align                | 'top', 'center' |          | 'center' | Item alignment   |
+
+### Usage
+
+See storybook example `src/components/Settings/__stories__/SettingsDemo`.
+
+### Examples
+
+One-level settings example:
+
+```jsx
+<Settings>
+  <Settings.Page title="Appearance">...</Settings.Page>
+  <Settings.Page title="Notifications">...</Settings.Page>
+</Settings>
+```
+
+Two-level settings example:
+
+```jsx
+<Settings>
+  <Settings.Group groupTitle="My service">
+    <Settings.Page title="Appearance">...</Settings.Page>
+    <Settings.Page title="Notifications">...</Settings.Page>
+  </Settings.Group>
+  <Settings.Group groupTitle="General">
+    <Settings.Page title="Appearance">...</Settings.Page>
+    <Settings.Page title="Notifications">...</Settings.Page>
+  </Settings.Group>
+</Settings>
+```
+
+Pages with sections example:
+
+```jsx
+<Settings.Page title="Features" icon={'...'}>
+  <Settings.Section title="Common">
+    <Settings.Item title="Default VCS">...</Settings.Item>
+    <Settings.Item title="Search root">...</Settings.Item>
+  </Settings.Section>
+  <Settings.Section title="Beta functionality">...</Settings.Section>
+</Settings.Page>
+```
diff --git a/src/components/Settings/Settings.scss b/src/components/Settings/Settings.scss
@@ -0,0 +1,97 @@
+@use '../variables';
+@import '../../../styles/mixins';
+
+$block: '.#{variables.$ns}settings';
+
+#{$block} {
+    display: grid;
+    grid-template-columns: 216px 1fr;
+    width: 834px;
+    height: 100%;
+
+    &_loading {
+        grid-template-columns: auto;
+    }
+
+    &__loader {
+        align-self: center;
+        justify-self: center;
+    }
+
+    &__not-found {
+        display: grid;
+        align-items: center;
+        justify-items: center;
+        height: 100%;
+    }
+
+    &__menu {
+        border-right: 1px solid var(--yc-color-line-generic);
+    }
+
+    &__heading {
+        @include text-subheader-2;
+        margin: 20px 20px 0;
+    }
+
+    &__search {
+        margin: 12px 20px 16px;
+    }
+
+    &__page {
+        padding: 20px;
+        overflow-y: auto;
+    }
+
+    &__section {
+        &-heading {
+            @include text-subheader-2;
+            margin: 0;
+        }
+
+        &-item {
+            margin-top: 24px;
+        }
+
+        & + & {
+            margin-top: 32px;
+        }
+    }
+
+    &__item {
+        display: grid;
+        grid-template-columns: 216px 1fr;
+        justify-items: start;
+
+        &_align_top {
+            align-items: start;
+        }
+
+        &_align_center {
+            align-items: center;
+        }
+    }
+
+    &__item-heading {
+        &_badge {
+            position: relative;
+
+            &::after {
+                content: '';
+                display: block;
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                background-color: var(--yc-color-text-danger);
+                position: absolute;
+                right: -8px;
+                top: 1px;
+            }
+        }
+    }
+
+    &__found {
+        @include text-accent;
+        background: var(--yc-color-base-selection);
+    }
+}