@progressiveui/react 1.22.0

package/src/components/Sidebar/Sidebar-test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import Sidebar, {SidebarHeader, SidebarScroll, SidebarBackButton} from '../Sidebar';
+import { shallow } from 'enzyme';
+
+describe('Sidebar', () => {
+    describe('Renders as expected', () => {
+        const wrapper = shallow(<Sidebar className="some-class" >Content</Sidebar>)
+
+        it('has classes as expected', () => {
+            expect(wrapper.exists('.wfp--sidebar-content__container')).toBe(true);
+           
+        })
+
+        it('should allow for custom classes to be applied', () => {
+            expect(wrapper.hasClass('some-class')).toEqual(true);
+        });
+
+        
+    });
+
+    describe('Renders sidebarHeader as expected', () => {
+        const wrapper = shallow(<SidebarHeader className="some-class" >Content</SidebarHeader>)
+
+        it('has classes as expected', () => {
+            expect(wrapper.exists('.wfp--sidebar-content__header')).toBe(true);
+           
+        })
+
+        it('should allow for custom classes to be applied', () => {
+            expect(wrapper.hasClass('some-class')).toEqual(true);
+        });
+
+        
+    });
+
+    describe('Renders SidebarScroll as expected', () => {
+        const wrapper = shallow(<SidebarScroll>Content</SidebarScroll>)
+
+        it('has classes as expected', () => {
+            expect(wrapper.exists('.wfp--sidebar-content__scroll')).toBe(true);  
+        })
+    
+    });
+
+    describe('Renders SidebarBackButton as expected', () => {
+        const wrapper = shallow(<SidebarBackButton>Content</SidebarBackButton>)
+
+        it('has classes as expected', () => {
+            expect(wrapper.exists('.wfp--sidebar-content__back-button')).toBe(true);  
+        })
+    
+    });
+
+    
+})

package/src/components/Sidebar/Sidebar.stories.tsx.new

@@ -0,0 +1,430 @@
+import React, { useState } from 'react';
+
+import markdown from './README.mdx';
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarBackButton,
+  SidebarScroll,
+} from './Sidebar';
+import DATA from './PHONEBOOK.json';
+import User from '../User';
+import { List, ListItem } from '../List';
+import { MainNavigation } from '../MainNavigation';
+import Item from '../Item';
+import Empty from '../Empty';
+import Search from '../Search';
+import Tag from '../Tag';
+
+export default {
+  title: 'Components/Content Related/Sidebar',
+  component: Sidebar,
+  subcomponents: { SidebarHeader, SidebarBackButton, SidebarScroll },
+  parameters: {
+    status: 'released',
+    mdx: markdown,
+    previewWidth: 'full',
+  },
+};
+
+export const Regular = (args) => {
+  const [active, setActive] = useState(false);
+
+  return (
+    <div style={{ display: 'flex', height: '100vh', flexDirection: 'column' }}>
+      <MainNavigation pageWidth="full" />
+      <Sidebar
+        {...args}
+        active={active}
+        sidebar={
+          <>
+            <SidebarHeader>
+              <Search />
+            </SidebarHeader>
+            <Item
+              additional="Yesterday"
+              hint={<Tag type="wfp">Hint</Tag>}
+              kind="horizontal"
+              subContent="subcontent"
+              title="A title is shown"
+              wrapper="sidebar"
+              onClick={() => setActive(true)}
+            />
+          </>
+        }
+        sidebarMobileHeader={
+          <>
+            <SidebarBackButton onClick={() => setActive(false)}>
+              Back
+            </SidebarBackButton>
+            <div>Detail page</div>
+          </>
+        }>
+        {active ? (
+          <Item
+            additional="Yesterday"
+            hint={<Tag type="wfp">Hint</Tag>}
+            kind="large"
+            showAdditionalIcon
+            subContent="This is the subContent. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. "
+            title="A title is shown"
+            wrapper="repeater">
+            nonumy eirmod tempor invidunt
+          </Item>
+        ) : (
+          <Empty title="Content here">
+            When an item is selected, its corresponding content will be shown
+            here
+          </Empty>
+        )}
+      </Sidebar>
+    </div>
+  );
+};
+
+const codesnippet = `
+import { Sidebar , SidebarHeader, SidebarBackButton, Tag,
+  MainNavigation, Item, Search, Empty} from "@progressiveui/react";
+
+
+const Phonebook = () => {
+ const [active, setActive] = useState(false);
+
+ return (
+   <div style={{ display: 'flex', height: '100vh', flexDirection: 'column' }}>
+     <MainNavigation pageWidth="full" />
+     <Sidebar
+       active={active}
+       sidebar={
+         <>
+           <SidebarHeader>
+             <Search id="search22" />
+           </SidebarHeader>
+           <Item
+             additional="Yesterday"
+             hint={<Tag type="wfp">Hint</Tag>}
+             kind="horizontal"
+             subContent="subcontent"
+             title="A title is shown"
+             wrapper="sidebar"
+             onClick={() => setActive(true)}
+           />
+         </>
+       }
+       sidebarMobileHeader={
+         <>
+           <SidebarBackButton onClick={() => setActive(false)}>
+             Back
+           </SidebarBackButton>
+           <div>Detail page</div>
+         </>
+       }>
+       {active ? (
+         <Item
+           additional="Yesterday"
+           hint={<Tag type="wfp">Hint</Tag>}
+           kind="large"
+           showAdditionalIcon
+           subContent="This is the subContent. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. "
+           title="A title is shown"
+           wrapper="button">
+           nonumy eirmod tempor invidunt
+         </Item>
+       ) : (
+         <Empty title="Content here">
+           When an item is selected, its corresponding content will be shown
+           here
+         </Empty>
+       )}
+     </Sidebar>
+   </div>
+ );
+}
+
+export default Phonebook;
+`;
+
+Regular.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: codesnippet,
+      },
+    },
+  },
+};
+
+export const Phonebook = () => {
+  const [selectedUserId, setSelectedUserId] = useState();
+  const [search, setSearch] = useState();
+  const selectedUserData = DATA.find((e) => e.id === selectedUserId);
+
+  const searchResults = search
+    ? DATA.filter((e) =>
+        e.full_name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
+      )
+    : DATA;
+  return (
+    <div style={{ display: 'flex', height: '100vh', flexDirection: 'column' }}>
+      <MainNavigation pageWidth="full" />
+      <Sidebar
+        active={selectedUserId}
+        sidebarMobileHeader={
+          <>
+            <SidebarBackButton onClick={() => setSelectedUserId(null)}>
+              Back
+            </SidebarBackButton>
+            <div>Detail page</div>
+          </>
+        }
+        sidebar={
+          <>
+            <SidebarHeader>
+              <Search onChange={(e) => setSearch(e)} />
+            </SidebarHeader>
+            <SidebarScroll>
+              {searchResults && searchResults.length > 0 ? (
+                searchResults.map((user, key) => (
+                  <Item
+                    active={selectedUserId === user.id}
+                    key={key}
+                    image={
+                      user.profile_image ? (
+                        <img alt={user.full_name} src={user.profile_image} />
+                      ) : undefined
+                    }
+                    title={user.full_name}
+                    children={user.email}
+                    subContent={user.phone_number}
+                    kind="horizontal"
+                    wrapper="sidebar"
+                    onClick={() => setSelectedUserId(user.id)}
+                    noImage
+                  />
+                ))
+              ) : (
+                <Empty title="No results">Please check your search</Empty>
+              )}
+            </SidebarScroll>
+          </>
+        }>
+        {selectedUserData ? (
+          <div
+            style={{
+              backgroundColor: '#fff',
+              padding: '1rem',
+            }}>
+            <User
+              id={selectedUserData.staff_id}
+              alt="avatar"
+              description={
+                <List small>
+                  <ListItem>{selectedUserData.job_title}</ListItem>
+                </List>
+              }
+              image={selectedUserData.profile_image}
+              name={selectedUserData.full_name}
+              style={{
+                borderBottom: '1px solid #edf1f3',
+                padding: '1rem 0 2rem 0',
+                marginBottom: '1rem',
+              }}
+            />
+            <div>
+              <div
+                style={{
+                  borderBottom: '1px solid #edf1f3',
+                  padding: '1rem 0',
+                }}>
+                <h4>Bio</h4>
+                <List small>
+                  <ListItem>{selectedUserData.bio}</ListItem>
+                </List>
+              </div>
+
+              <div
+                style={{
+                  borderBottom: '1px solid #edf1f3',
+                  padding: '1rem 0',
+                }}>
+                <h4>Contact</h4>
+                <List small>
+                  <ListItem>email: {selectedUserData.email}</ListItem>
+                  <ListItem>phone: {selectedUserData.phone_number}</ListItem>
+                </List>
+              </div>
+
+              <div style={{ padding: '1rem 0' }}>
+                <h4>Location</h4>
+                <List small>
+                  <ListItem>country: {selectedUserData.country}</ListItem>
+                </List>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <Empty title="No user selected">Please select a user</Empty>
+        )}
+      </Sidebar>
+    </div>
+  );
+};
+
+const sourcecode = `
+import React, {useState} from 'react';
+import { Sidebar , SidebarHeader, SidebarBackButton, SidebarScroll,
+     MainNavigation, User, Item, Search, Empty, List, ListItem } from "@progressiveui/react";
+
+const phonebookdata = [
+  {
+    "id": 1,
+    "full_name": "Ivan Wansbury",
+    "email": "iwansbury0@aol.com",
+    "phone_number": "587-361-8780",
+    "country": "Russia",
+    "job_title": "Tax Accountant",
+    "staff_id": "30-0410793",
+    "bio": "dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum",
+    "profile_image": "https://robohash.org/quirepellendussit.bmp?size=50x50&set=set1"
+  },
+  {
+    "id": 2,
+    "full_name": "Kerwin McElhargy",
+    "email": "kmcelhargy1@wsj.com",
+    "phone_number": "601-930-2145",
+    "country": "United States",
+    "job_title": "Accounting Assistant II",
+    "staff_id": "93-7190318",
+    "bio": "augue vestibulum rutrum rutrum neque aenean auctor gravida sem praesent id massa id nisl venenatis lacinia aenean sit amet justo morbi ut odio cras mi pede malesuada in imperdiet et commodo vulputate justo in blandit ultrices enim lorem ipsum dolor sit amet consectetuer adipiscing elit proin interdum mauris non ligula pellentesque ultrices phasellus id sapien in sapien iaculis congue vivamus metus arcu adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget"
+  },
+]
+
+const Phonebook = () => {
+        
+  const [selectedUserId, setSelectedUserId] = useState(null);
+  const [search, setSearch] = useState();
+  const selectedUserData = phonebookdata.find((e) => e.id === selectedUserId);
+
+  const searchResults = search
+    ? phonebookdata.filter((e) =>
+        e.full_name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
+      )
+    : phonebookdata;
+    
+  return (
+    <div style={{ display: 'flex', height: '100vh', flexDirection: 'column' }}>
+      <MainNavigation pageWidth="full" />
+      <Sidebar
+        active={selectedUserId}
+        sidebarMobileHeader={
+            <>
+            <SidebarBackButton onClick={() => setSelectedUserId()}>
+              Back
+            </SidebarBackButton>
+            <div>Detail page</div>
+          </>
+        }
+        sidebar={
+          <>
+            <SidebarHeader>
+              <Search id="search11" onChange={(e) => setSearch(e)} />
+            </SidebarHeader>
+            <SidebarScroll>
+              {searchResults && searchResults.length > 0 ? (
+                searchResults.map((user, key) => (
+                  <Item
+                    active={selectedUserId === user.id}
+                    key={key}
+                    image={
+                      user.profile_image ? (
+                        <img alt={user.full_name} src={user.profile_image} />
+                      ) : undefined
+                    }
+                    title={user.full_name}
+                    subContent={user.phone_number}
+                    kind="horizontal"
+                    wrapper="sidebar"
+                    onClick={() => setSelectedUserId(user.id)}
+                    noImage
+                  >{user.email}</Item>
+                ))
+              ) : (
+                <Empty title="No results">Please check your search</Empty>
+              )}
+            </SidebarScroll>
+          </>
+        }>
+        {selectedUserData ? (
+          <div
+            style={{
+              backgroundColor: '#fff',
+              padding: '1rem',
+            }}>
+            <User
+              id={selectedUserData.staff_id}
+              alt="avatar"
+              description={
+                <List small>
+                  <ListItem>{selectedUserData.job_title}</ListItem>
+                </List>
+              }
+              image={selectedUserData.profile_image}
+              name={selectedUserData.full_name}
+              style={{
+                borderBottom: '1px solid #edf1f3',
+                padding: '1rem 0 2rem 0',
+                marginBottom: '1rem',
+              }}
+            />
+            <div>
+              <div
+                style={{
+                  borderBottom: '1px solid #edf1f3',
+                  padding: '1rem 0',
+                }}>
+                <h4>Bio</h4>
+                <List small>
+                  <ListItem>{selectedUserData.bio}</ListItem>
+                </List>
+              </div>
+
+              <div
+                style={{
+                  borderBottom: '1px solid #edf1f3',
+                  padding: '1rem 0',
+                }}>
+                <h4>Contact</h4>
+                <List small>
+                  <ListItem>email: {selectedUserData.email}</ListItem>
+                  <ListItem>phone: {selectedUserData.phone_number}</ListItem>
+                </List>
+              </div>
+
+              <div style={{ padding: '1rem 0' }}>
+                <h4>Location</h4>
+                <List small>
+                  <ListItem>country: {selectedUserData.country}</ListItem>
+                </List>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <Empty title="No user selected">Please select a user</Empty>
+        )}
+      </Sidebar>
+    </div>
+  );
+  }
+
+  export default Phonebook;
+`;
+
+Phonebook.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: sourcecode,
+      },
+    },
+  },
+};

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,164 @@
+import * as React from "react";
+// import Icon from '../Icon';
+import type { PropsWithChildren } from "react";
+import classNames from "classnames";
+import { ChevronLeft } from "@progressiveui/icons-react";
+import useSettings from "../../hooks/useSettings";
+
+type SidebarProps = PropsWithChildren<{
+  /**
+   The `active` prop show the content section when an item is clicked. It's useful in mobile view 
+ */
+  active?: boolean | string | number;
+  /**
+   The Sidebar is usually where the sidebar items will be. 
+   `<SidebarHeader/>` can be called in `Sidebar` and example search can be used in here
+ */
+  sidebar?: React.ReactNode;
+  /**
+     The sidebarMobileHeader is shwon when view is in mobile version. 
+     `<SidebarBackButton/>` can used in the `sidebarMobileHeader` prop
+  */
+  sidebarMobileHeader?: React.ReactNode;
+  className?: string;
+}>;
+
+const Sidebar: React.FC<SidebarProps> = ({
+  active,
+  children,
+  className,
+  // sidebarMobileHeader,
+  sidebar,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const classes = classNames(
+    `${prefix}--sidebar-content__container`,
+    className,
+    {
+      [`${prefix}--sidebar-content__container--active`]: active,
+    }
+  );
+
+  return (
+    <div className={classes} {...other}>
+      <div className={`${prefix}--sidebar-item-content`}>{sidebar}</div>
+      <div className={`${prefix}--content-section`}>{children}</div>
+    </div>
+  );
+};
+
+export interface SidebarHeaderProps {
+  /**
+   Disable the default padding of the SidebarHeader
+ */
+  noPadding?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const SidebarHeader: React.FC<SidebarHeaderProps> = ({
+  className,
+  children,
+  noPadding,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const classes = classNames(`${prefix}--sidebar-content__header`, className, {
+    [`${prefix}--sidebar-content__header--no-padding`]: noPadding,
+  });
+
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
+};
+
+type SidebarContentHeaderProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+const SidebarContentHeader: React.FC<SidebarContentHeaderProps> = ({
+  className,
+  children,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const mobileClasses = classNames(
+    `${prefix}--sidebar-content-mobile-header`,
+    className,
+    {}
+  );
+
+  return (
+    <div className={mobileClasses} {...other}>
+      {children}
+    </div>
+  );
+};
+
+type SidebarContentBodyProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+const SidebarContentBody: React.FC<SidebarContentBodyProps> = ({
+  className,
+  children,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const classes = classNames(
+    `${prefix}--sidebar-content__children`,
+    className,
+    {}
+  );
+
+  return (
+    <div id="scroll-container" className={classes} {...other}>
+      {children}
+    </div>
+  );
+};
+
+interface SidebarScrollProps {
+  children?: React.ReactNode;
+}
+
+const SidebarScroll: React.FC<SidebarScrollProps> = ({
+  children,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  return (
+    <div className={`${prefix}--sidebar-content__scroll`} {...other}>
+      {children}
+    </div>
+  );
+};
+
+interface SidebarBackButtonProps {
+  children?: React.ReactNode;
+}
+
+const SidebarBackButton: React.FC<SidebarBackButtonProps> = ({
+  children,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  return (
+    <div className={`${prefix}--sidebar-content__back-button`} {...other}>
+      <ChevronLeft />
+      {children}
+    </div>
+  );
+};
+
+export {
+  Sidebar,
+  SidebarHeader,
+  SidebarContentHeader,
+  SidebarContentBody,
+  SidebarScroll,
+  SidebarBackButton,
+};

package/src/components/Sidebar/index.ts

@@ -0,0 +1,8 @@
+export {
+  Sidebar,
+  SidebarHeader,
+  SidebarContentHeader,
+  SidebarContentBody,
+  SidebarScroll,
+  SidebarBackButton,
+} from './Sidebar';

package/src/components/SkeletonText/README.mdx

@@ -0,0 +1,29 @@
+**OVERVIEW**
+
+A Skeleton is an animated placeholder that simulates the layout of a page / screen while data is being loaded. It mitigates focus on the loading process and improves the user’s perceived load time.
+
+**HOW IT WORKS**
+
+Skeleton graphic elements appears in place of the content to be loaded and disappear all together when the content is fully loaded.
+
+**RULES**
+
+- A Skeleton should provide a close representation of the ultimate page layout and content once loaded.
+- All elements should have same colour and animation.
+- Alle elements should have the same size of the represented content.
+- Meant to be used specifically on a white background.
+
+**DOS**
+
+- ✓ Use for pages where all content loads at the same time.
+- ✓ Loading for dynamic content; use actual content when content doesn’t change (static content).
+- ✓ Use motion within the Skeleton to reinforce that the page is loading behind the scenes.
+- ✓ Ideal for pages that require longer initial load times.
+
+**DONTS**
+
+- ✗ Never use skeletons to give feedback for in-context actions such as saving a form or fetching search results. Instead use the progress or spinner component.
+- ✗ If the visual layout/format of the content being loaded is unknown; or you need to indicate processing or that change will occur on the page (rather than loading UI elements), consider using a loading dots instead.
+
+**ACCESSIBILITY**
+A Skeleton should announce to users using a screen reader that content or a page is being loaded.