Merge pull request #507 from brightlayer-ui/dev

Publicize tables guideline and R22 release
etn-ccis · Jan 18, 2022 · 8cd451c · 8cd451c
2 parents d3a1b75 + 697d37d
commit 8cd451c
Show file tree

Hide file tree

Showing 183 changed files with 1,416 additions and 11,993 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,3 @@
-src/docs/community/faq.mdx
+src/docs/community/faq.mdx
+src/database/sitemap-database.json
+src/database/index-database.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "doc-it",
     "author": "Brightlayer UI <[email protected]>",
-    "version": "2.4.2",
+    "version": "3.0.0",
     "private": true,
     "scripts": {
         "start": "node scripts/start.js",
@@ -27,7 +27,7 @@
         "@brainhubeu/react-carousel": "1.12.15",
         "@brightlayer-ui/colors": "^3.0.1",
         "@brightlayer-ui/colors-branding": "^3.1.0",
-        "@brightlayer-ui/icons-mui": "^2.7.0",
+        "@brightlayer-ui/icons-mui": "^2.8.0",
         "@brightlayer-ui/react-components": "^5.3.2",
         "@brightlayer-ui/react-progress-icons": "^2.1.1",
         "@brightlayer-ui/react-themes": "^6.1.0",

diff --git a/public/favico.png b/public/favico.png
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="icon" href="%PUBLIC_URL%/brightlayer-ui.png" />
+        <link rel="icon" href="%PUBLIC_URL%/favico.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#007bc1" />
         <meta name="description" content="Documentation site for the Brightlayer UI design system." />

diff --git a/scripts/crawl/sitemap.json b/scripts/crawl/sitemap.json
@@ -136,7 +136,7 @@
                     "url": "/internationalization"
                 },
                 {
-                    "title": "Lists & Tables",
+                    "title": "Lists",
                     "url": "/lists"
                 },
                 {
@@ -156,6 +156,10 @@
                     "url": "/layout",
                     "hidden": true
                 },
+                {
+                    "title": "Tables",
+                    "url": "/tables"
+                },
                 {
                     "title": "Steppers",
                     "url": "/steppers"

diff --git a/src/__configuration__/markdown/markdownMapping.tsx b/src/__configuration__/markdown/markdownMapping.tsx
@@ -13,7 +13,7 @@ import {
 } from '@material-ui/core';
 import { Link as LinkIcon } from '@material-ui/icons';
 import { Link, LinkProps } from 'react-router-dom';
-import { REGULAR_WIDTH_STYLE, copyTextToClipboard } from '../../app/shared';
+import { REGULAR_WIDTH_STYLE, copyTextToClipboard, getHash } from '../../app/shared';
 import * as Colors from '@brightlayer-ui/colors';
 import color from 'color';
 import clsx from 'clsx';
@@ -52,11 +52,6 @@ export const InternalLink = (props: LinkProps): JSX.Element => {
         />
     );
 };
-const getHash = (str: string): string =>
-    str
-        .replace(/ /g, '-')
-        .replace(/[#?/&]/g, '')
-        .toLowerCase();
 
 type Headline = HTMLAttributes<HTMLDivElement> & {
     hash: string;

diff --git a/src/__configuration__/navigationMenu/navigation.tsx b/src/__configuration__/navigationMenu/navigation.tsx
@@ -203,9 +203,9 @@ export const pageDefinitions: SimpleNavItem[] = [
                 component: <MarkdownPage title={'Internationalization'} markdown={Docs.Patterns.I18N} />,
             },
             {
-                title: 'Lists & Tables',
+                title: 'Lists',
                 url: '/lists',
-                component: <MarkdownPage title={'Lists & Tables'} markdown={Docs.Patterns.Lists} />,
+                component: <MarkdownPage title={'Lists'} markdown={Docs.Patterns.Lists} />,
             },
             {
                 title: 'Loading & Waiting',
@@ -228,6 +228,11 @@ export const pageDefinitions: SimpleNavItem[] = [
                 component: <MarkdownPage title={'Page Layout'} markdown={Docs.Patterns.Layout} />,
                 hidden: true,
             },
+            {
+                title: 'Tables',
+                url: '/tables',
+                component: <MarkdownPage title={'Tables'} markdown={Docs.Patterns.Tables} />,
+            },
             {
                 title: 'Steppers',
                 url: '/steppers',
@@ -281,16 +286,16 @@ export const pageDefinitions: SimpleNavItem[] = [
                 url: '/illustrations',
                 component: <MarkdownPage title={'Illustrations'} markdown={Docs.Style.Illustrations} />,
             },
-            {
-                title: 'Typography',
-                url: '/typography',
-                component: <MarkdownPage title={'Typography'} markdown={Docs.Style.Typography} />,
-            },
             {
                 title: 'Themes',
                 url: '/themes',
                 component: <MarkdownPage title={'Themes'} markdown={Docs.Style.Themes} />,
             },
+            {
+                title: 'Typography',
+                url: '/typography',
+                component: <MarkdownPage title={'Typography'} markdown={Docs.Style.Typography} />,
+            },
         ],
     },
     {

diff --git a/src/__configuration__/patterns/index.tsx b/src/__configuration__/patterns/index.tsx
@@ -8,6 +8,7 @@ import LoadingImage from '../../app/assets/design-patterns/loading-states/loadin
 import LoginBanner from '../../app/assets/design-patterns/user-authentication/login.svg';
 import NavigationtImg from '../../app/assets/design-patterns/navigation/navigation.svg';
 import OverlayBanner from '../../app/assets/design-patterns/overlays/overlay-banner.svg';
+import TableImg from '../../app/assets/design-patterns/tables/tables.svg';
 // import PageLayoutImg from '../../app/assets/design-patterns/page-layout/layout-banner.svg';
 import StepperImg from '../../app/assets/design-patterns/steppers/steppers-banner.svg';
 import VisualizationImage from '../../app/assets/design-patterns/visualizations/visualizations-banner.svg';
@@ -56,7 +57,7 @@ export const patterns = [
         },
     },
     {
-        title: 'Lists & Tables',
+        title: 'Lists',
         url: '/patterns/lists',
         description: 'Different lists for different kinds of data.',
         image: ListImg,
@@ -88,6 +89,15 @@ export const patterns = [
     //     description: 'Laying out elements on the screen.',
     //     image: PageLayoutImg,
     // },
+    {
+        title: 'Tables',
+        url: '/patterns/tables',
+        description: 'Render tables in a structured way.',
+        image: TableImg,
+        background: {
+            position: 'center',
+        },
+    },
     {
         title: 'Steppers',
         url: '/patterns/steppers',

diff --git a/src/__configuration__/roadmap/index.ts b/src/__configuration__/roadmap/index.ts
@@ -1,12 +1,17 @@
 import { Quarter, Release } from '../../__types__';
 
-export const CURRENT_RELEASE: Release = 'R22';
+export const CURRENT_RELEASE: Release = 'R23';
 
 export const AVAILABLE_RELEASES: Array<{
     name: Release;
     year: number;
     quarter: Quarter;
 }> = [
+    {
+        name: 'R24',
+        year: 2022,
+        quarter: 'Q2',
+    },
     {
         name: 'R23',
         year: 2022,

diff --git a/src/__configuration__/themes/schedule.ts → src/__configuration__/themes/_schedule.ts b/src/__configuration__/themes/schedule.ts → src/__configuration__/themes/_schedule.ts
diff --git a/src/__configuration__/themes/earth-day.ts b/src/__configuration__/themes/earth-day.ts
@@ -2,7 +2,6 @@ import * as BLUIThemes from '@brightlayer-ui/react-themes';
 import * as Colors from '@brightlayer-ui/colors';
 import banner from '../../app/assets/themes/earth-day/earth.jpg';
 import cursor from '../../app/assets/themes/earth-day/cursor.svg';
-import titleBlock from '../../app/assets/themes/earth-day/title-block.gif';
 import AppBarTile from '../../app/assets/themes/earth-day/tile.svg';
 import { Schedule } from './types';
 
@@ -26,14 +25,9 @@ export const EarthDaySchedule: Schedule = {
             color: Colors.white[50],
         },
         className: 'earth-day',
-        customBannerText: {
-            backgroundImage: `url(${titleBlock})`,
-            backgroundSize: 'contain',
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'center',
-        },
         appBarBackground: {
-            backgroundImage: `url(${AppBarTile})`,
+            background: `url(${AppBarTile}), linear-gradient(90deg, ${Colors.green[900]}, ${Colors.blue[700]})`,
+            backgroundPosition: 'center',
         },
     },
 };
diff --git a/src/__configuration__/themes/index.ts b/src/__configuration__/themes/index.ts
@@ -1,2 +1,2 @@
 export * from './types';
-export * from './schedule';
+export * from './_schedule';
diff --git a/src/__configuration__/themes/mid-autumn-festival.ts b/src/__configuration__/themes/mid-autumn-festival.ts
@@ -58,6 +58,12 @@ export const MidAutumnSchedule: Schedule = {
                         },
                     },
                 },
+                MuiFab: {
+                    primary: {
+                        backgroundColor: Colors.red[700],
+                        color: 'white',
+                    },
+                },
             },
         },
         landingPageBanner: {
@@ -77,6 +83,7 @@ export const MidAutumnSchedule: Schedule = {
             backgroundRepeat: 'no-repeat',
             backgroundPosition: 'center',
             height: '40vh',
+            width: 600,
         },
         appBarBackground: {
             backgroundImage: `url(${AppBarTile})`,

diff --git a/src/__configuration__/themes/spring-festival.ts b/src/__configuration__/themes/spring-festival.ts
@@ -48,6 +48,11 @@ export const SpringFestivalSchedule: Schedule = {
                     outlined: {},
                     outlinedPrimary: {},
                 },
+                MuiFab: {
+                    primary: {
+                        backgroundColor: Colors.yellow[900],
+                    },
+                },
             },
         },
         landingPageBanner: {
@@ -65,6 +70,7 @@ export const SpringFestivalSchedule: Schedule = {
             backgroundSize: 'contain',
             backgroundRepeat: 'no-repeat',
             backgroundPosition: 'center',
+            width: 600,
         },
         drawerActiveBackgroundFade: 0.9,
         appBarBackground: {

diff --git a/src/__types__/index.ts b/src/__types__/index.ts
@@ -31,7 +31,7 @@ export type IconColor = 'black' | 'blue' | 'gray' | 'white';
 export type ItemTypeFilter = 'all' | 'design' | 'development';
 export type Status = 'backlog' | 'in-progress' | 'pre-release' | 'deferred' | 'finished';
 export type Quarter = 'Q1' | 'Q2' | 'Q3' | 'Q4';
-export type Release = 'R16' | 'R17' | 'R18' | 'R19' | 'R20' | 'R21' | 'R22' | 'R23';
+export type Release = 'R16' | 'R17' | 'R18' | 'R19' | 'R20' | 'R21' | 'R22' | 'R23' | 'R24';
 
 export type RoadmapItem = {
     name: string;

diff --git a/src/app/assets/design-patterns/account-menu/crowded-drawer.png b/src/app/assets/design-patterns/account-menu/crowded-drawer.png
diff --git a/src/app/assets/design-patterns/account-menu/crowded-user-menu.png b/src/app/assets/design-patterns/account-menu/crowded-user-menu.png
diff --git a/src/app/assets/design-patterns/account-menu/drawer-do-and-dont-1.png b/src/app/assets/design-patterns/account-menu/drawer-do-and-dont-1.png
diff --git a/src/app/assets/design-patterns/account-menu/drawer-do-and-dont-2.png b/src/app/assets/design-patterns/account-menu/drawer-do-and-dont-2.png
diff --git a/src/app/assets/design-patterns/action-list/action-list-overlay.png b/src/app/assets/design-patterns/action-list/action-list-overlay.png
diff --git a/src/app/assets/design-patterns/app-bar/collapsible-app-bar-1.png b/src/app/assets/design-patterns/app-bar/collapsible-app-bar-1.png
diff --git a/src/app/assets/design-patterns/app-bar/collapsible-app-bar-2.png b/src/app/assets/design-patterns/app-bar/collapsible-app-bar-2.png
diff --git a/src/app/assets/design-patterns/app-bar/safe-area-error.png b/src/app/assets/design-patterns/app-bar/safe-area-error.png
diff --git a/src/app/assets/design-patterns/app-bar/safe-area-ok.png b/src/app/assets/design-patterns/app-bar/safe-area-ok.png
diff --git a/src/app/assets/design-patterns/app-bar/safe-area.png b/src/app/assets/design-patterns/app-bar/safe-area.png
diff --git a/src/app/assets/design-patterns/empty-states/do-encourage.png b/src/app/assets/design-patterns/empty-states/do-encourage.png
diff --git a/src/app/assets/design-patterns/empty-states/dont-distract.png b/src/app/assets/design-patterns/empty-states/dont-distract.png
diff --git a/src/app/assets/design-patterns/internationalization/icon-align-1.png b/src/app/assets/design-patterns/internationalization/icon-align-1.png
diff --git a/src/app/assets/design-patterns/internationalization/icons-flipped-error.png b/src/app/assets/design-patterns/internationalization/icons-flipped-error.png
diff --git a/src/app/assets/design-patterns/internationalization/icons-flipped-ok.png b/src/app/assets/design-patterns/internationalization/icons-flipped-ok.png
diff --git a/src/app/assets/design-patterns/internationalization/icons-flipped.png b/src/app/assets/design-patterns/internationalization/icons-flipped.png
diff --git a/src/app/assets/design-patterns/lists/action-button-as-button.png b/src/app/assets/design-patterns/lists/action-button-as-button.png
diff --git a/src/app/assets/design-patterns/lists/icon-align-1.png b/src/app/assets/design-patterns/lists/icon-align-1.png
diff --git a/src/app/assets/design-patterns/lists/icon-align-2.png b/src/app/assets/design-patterns/lists/icon-align-2.png
diff --git a/src/app/assets/design-patterns/lists/icon-align-3.png b/src/app/assets/design-patterns/lists/icon-align-3.png
diff --git a/src/app/assets/design-patterns/lists/icon-align.png b/src/app/assets/design-patterns/lists/icon-align.png
diff --git a/src/app/assets/design-patterns/lists/local-list-actions-2.png b/src/app/assets/design-patterns/lists/local-list-actions-2.png
diff --git a/src/app/assets/design-patterns/lists/local-list-actions.png b/src/app/assets/design-patterns/lists/local-list-actions.png
diff --git a/src/app/assets/design-patterns/lists/multi-select-list.png b/src/app/assets/design-patterns/lists/multi-select-list.png
diff --git a/src/app/assets/design-patterns/lists/navigate-list-1.png b/src/app/assets/design-patterns/lists/navigate-list-1.png
diff --git a/src/app/assets/design-patterns/lists/navigate-list-2.png b/src/app/assets/design-patterns/lists/navigate-list-2.png
diff --git a/src/app/assets/design-patterns/lists/notification-buckets-1.png b/src/app/assets/design-patterns/lists/notification-buckets-1.png
diff --git a/src/app/assets/design-patterns/lists/notification-buckets-2.png b/src/app/assets/design-patterns/lists/notification-buckets-2.png
diff --git a/src/app/assets/design-patterns/lists/notification-list-desktop.png b/src/app/assets/design-patterns/lists/notification-list-desktop.png
diff --git a/src/app/assets/design-patterns/lists/scorecard.png b/src/app/assets/design-patterns/lists/scorecard.png
diff --git a/src/app/assets/design-patterns/lists/simple-list-1.png b/src/app/assets/design-patterns/lists/simple-list-1.png
diff --git a/src/app/assets/design-patterns/lists/simple-list-2.png b/src/app/assets/design-patterns/lists/simple-list-2.png
diff --git a/src/app/assets/design-patterns/lists/sortable-list.gif b/src/app/assets/design-patterns/lists/sortable-list.gif
diff --git a/src/app/assets/design-patterns/login/forget-password-email-sent.png b/src/app/assets/design-patterns/login/forget-password-email-sent.png
diff --git a/src/app/assets/design-patterns/login/forget-password-enter-email.png b/src/app/assets/design-patterns/login/forget-password-enter-email.png
diff --git a/src/app/assets/design-patterns/login/login-error.png b/src/app/assets/design-patterns/login/login-error.png
diff --git a/src/app/assets/design-patterns/login/login-inactive.png b/src/app/assets/design-patterns/login/login-inactive.png
diff --git a/src/app/assets/design-patterns/login/login-view-password.png b/src/app/assets/design-patterns/login/login-view-password.png
diff --git a/src/app/assets/design-patterns/login/registration-account-details.png b/src/app/assets/design-patterns/login/registration-account-details.png
diff --git a/src/app/assets/design-patterns/login/registration-verify-email.png b/src/app/assets/design-patterns/login/registration-verify-email.png
diff --git a/src/app/assets/design-patterns/navigation/active-parent.png b/src/app/assets/design-patterns/navigation/active-parent.png
diff --git a/src/app/assets/design-patterns/navigation/active-regular.png b/src/app/assets/design-patterns/navigation/active-regular.png
diff --git a/src/app/assets/design-patterns/navigation/active-round.png b/src/app/assets/design-patterns/navigation/active-round.png
diff --git a/src/app/assets/design-patterns/navigation/active-solid.png b/src/app/assets/design-patterns/navigation/active-solid.png
diff --git a/src/app/assets/design-patterns/navigation/divider-do.png b/src/app/assets/design-patterns/navigation/divider-do.png
diff --git a/src/app/assets/design-patterns/navigation/divider-dont.png b/src/app/assets/design-patterns/navigation/divider-dont.png
diff --git a/src/app/assets/design-patterns/navigation/divider.png b/src/app/assets/design-patterns/navigation/divider.png
diff --git a/src/app/assets/design-patterns/navigation/safe-area-1.png b/src/app/assets/design-patterns/navigation/safe-area-1.png
diff --git a/src/app/assets/design-patterns/navigation/safe-area-2.png b/src/app/assets/design-patterns/navigation/safe-area-2.png
diff --git a/src/app/assets/design-patterns/navigation/safe-area.png b/src/app/assets/design-patterns/navigation/safe-area.png
diff --git a/src/app/assets/design-patterns/overlays/modal-bottom-sheet-desktop.png b/src/app/assets/design-patterns/overlays/modal-bottom-sheet-desktop.png
diff --git a/src/app/assets/design-patterns/overlays/modal-bottom-sheet-mobile.png b/src/app/assets/design-patterns/overlays/modal-bottom-sheet-mobile.png
diff --git a/src/app/assets/design-patterns/overlays/overlay-banner.svg b/src/app/assets/design-patterns/overlays/overlay-banner.svg
diff --git a/src/app/assets/design-patterns/tables/action-at-row-end.png b/src/app/assets/design-patterns/tables/action-at-row-end.png
diff --git a/src/app/assets/design-patterns/tables/action-on-hover.png b/src/app/assets/design-patterns/tables/action-on-hover.png
diff --git a/src/app/assets/design-patterns/tables/addition-animation.gif b/src/app/assets/design-patterns/tables/addition-animation.gif
diff --git a/src/app/assets/design-patterns/tables/advanced-table-filter.gif b/src/app/assets/design-patterns/tables/advanced-table-filter.gif
diff --git a/src/app/assets/design-patterns/tables/arrange-list.svg b/src/app/assets/design-patterns/tables/arrange-list.svg
diff --git a/src/app/assets/design-patterns/tables/arrange-table.svg b/src/app/assets/design-patterns/tables/arrange-table.svg
diff --git a/src/app/assets/design-patterns/tables/batch-action-1.png b/src/app/assets/design-patterns/tables/batch-action-1.png
diff --git a/src/app/assets/design-patterns/tables/batch-action-2.png b/src/app/assets/design-patterns/tables/batch-action-2.png
diff --git a/src/app/assets/design-patterns/tables/click-area-1.png b/src/app/assets/design-patterns/tables/click-area-1.png
diff --git a/src/app/assets/design-patterns/tables/click-area-2.png b/src/app/assets/design-patterns/tables/click-area-2.png
diff --git a/src/app/assets/design-patterns/tables/column-order-1.png b/src/app/assets/design-patterns/tables/column-order-1.png
diff --git a/src/app/assets/design-patterns/tables/column-order-2.png b/src/app/assets/design-patterns/tables/column-order-2.png
diff --git a/src/app/assets/design-patterns/tables/dashboard-table.png b/src/app/assets/design-patterns/tables/dashboard-table.png
diff --git a/src/app/assets/design-patterns/tables/drag-1.png b/src/app/assets/design-patterns/tables/drag-1.png
diff --git a/src/app/assets/design-patterns/tables/drag-2.png b/src/app/assets/design-patterns/tables/drag-2.png
diff --git a/src/app/assets/design-patterns/tables/expanded-row-actions.png b/src/app/assets/design-patterns/tables/expanded-row-actions.png
diff --git a/src/app/assets/design-patterns/tables/expanded-row-too-complicated.png b/src/app/assets/design-patterns/tables/expanded-row-too-complicated.png
diff --git a/src/app/assets/design-patterns/tables/expanded-row.gif b/src/app/assets/design-patterns/tables/expanded-row.gif
diff --git a/src/app/assets/design-patterns/tables/filter-1.png b/src/app/assets/design-patterns/tables/filter-1.png
diff --git a/src/app/assets/design-patterns/tables/filter-2.png b/src/app/assets/design-patterns/tables/filter-2.png
diff --git a/src/app/assets/design-patterns/tables/filter-3.png b/src/app/assets/design-patterns/tables/filter-3.png
diff --git a/src/app/assets/design-patterns/tables/filter-4.png b/src/app/assets/design-patterns/tables/filter-4.png
diff --git a/src/app/assets/design-patterns/tables/home-page-preview.gif b/src/app/assets/design-patterns/tables/home-page-preview.gif
diff --git a/src/app/assets/design-patterns/tables/horizontal-scroll-bar.png b/src/app/assets/design-patterns/tables/horizontal-scroll-bar.png
diff --git a/src/app/assets/design-patterns/tables/implicit-value-list-1.png b/src/app/assets/design-patterns/tables/implicit-value-list-1.png
diff --git a/src/app/assets/design-patterns/tables/implicit-value-list-2.png b/src/app/assets/design-patterns/tables/implicit-value-list-2.png
diff --git a/src/app/assets/design-patterns/tables/implicit-value-table.png b/src/app/assets/design-patterns/tables/implicit-value-table.png
diff --git a/src/app/assets/design-patterns/tables/invite-to-landscape-countdown.gif b/src/app/assets/design-patterns/tables/invite-to-landscape-countdown.gif
diff --git a/src/app/assets/design-patterns/tables/invite-to-landscape-x.png b/src/app/assets/design-patterns/tables/invite-to-landscape-x.png
diff --git a/src/app/assets/design-patterns/tables/landscape-table.gif b/src/app/assets/design-patterns/tables/landscape-table.gif
diff --git a/src/app/assets/design-patterns/tables/list-v-table-list.png b/src/app/assets/design-patterns/tables/list-v-table-list.png
diff --git a/src/app/assets/design-patterns/tables/list-v-table-table.png b/src/app/assets/design-patterns/tables/list-v-table-table.png
diff --git a/src/app/assets/design-patterns/tables/mobile-inf-scroll.png b/src/app/assets/design-patterns/tables/mobile-inf-scroll.png
diff --git a/src/app/assets/design-patterns/tables/mobile-pagination.png b/src/app/assets/design-patterns/tables/mobile-pagination.png
diff --git a/src/app/assets/design-patterns/tables/page-body-table.png b/src/app/assets/design-patterns/tables/page-body-table.png
diff --git a/src/app/assets/design-patterns/tables/read-list.svg b/src/app/assets/design-patterns/tables/read-list.svg