-
Notifications
You must be signed in to change notification settings - Fork 103
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feat/sidebar-content' of https://github.com/wfp/ui into…
… feat/sidebar-content
- Loading branch information
Showing
10 changed files
with
40,574 additions
and
20,312 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react'; | ||
| import Link from '../Link'; | ||
| import { shallow } from 'enzyme'; | ||
|
|
||
| describe('Link', () => { | ||
| describe('Renders as expected', () => { | ||
| const link = shallow( | ||
| <Link href="www.google.com" className="some-class"> | ||
| A simple link | ||
| </Link> | ||
| ); | ||
| it('should use the appropriate link class', () => { | ||
| expect(link.hasClass('wfp--link')).toEqual(true); | ||
| }); | ||
| it('should inherit the href property', () => { | ||
| expect(link.props().href).toEqual('www.google.com'); | ||
| }); | ||
| it('should include child content', () => { | ||
| expect(link.text()).toEqual('A simple link'); | ||
| }); | ||
| it('should all for custom classes to be applied', () => { | ||
| expect(link.hasClass('some-class')).toEqual(true); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classnames from 'classnames'; | ||
| import settings from '../../globals/js/settings'; | ||
| import Icon from '../Icon'; | ||
| const { prefix } = settings; | ||
| import { iconChevronRight } from '@wfp/icons'; | ||
|
|
||
| /** The item component to show entries inside a list, like a sidebar or an overview page. */ | ||
| export const Item = ({ | ||
| additional, | ||
| button, | ||
| children, | ||
| className, | ||
| href, | ||
| subText, | ||
| icon, | ||
| hint, | ||
| showAdditionalIcon, | ||
| title, | ||
| kind = 'large', | ||
| wrapper = 'none', | ||
| ...other | ||
| }) => { | ||
| const classNames = classnames( | ||
| { | ||
| [`${prefix}--item`]: true, | ||
| [`${prefix}--item--${kind}`]: kind, | ||
| [`${prefix}--item--${wrapper}`]: wrapper, | ||
| }, | ||
| className | ||
| ); | ||
| return ( | ||
| <div className={classNames} {...other}> | ||
| <div className={`${prefix}--item__icon`}>{icon}</div> | ||
| <div className={`${prefix}--item__content`}> | ||
| {title && ( | ||
| <div className={`${prefix}--item__title-wrapper`}> | ||
| <h2 className={`${prefix}--item__title`}>{title}</h2> | ||
| {additional && ( | ||
| <div className={`${prefix}--item__additional`}> | ||
| {additional} | ||
| {showAdditionalIcon && ( | ||
| <Icon | ||
| icon={iconChevronRight} | ||
| className={`${prefix}--item__additional-icon`} | ||
| /> | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
| )} | ||
| <div className={`${prefix}--item__text-wrapper`}> | ||
| <div> | ||
| {children && ( | ||
| <div className={`${prefix}--item__text`}>{children}</div> | ||
| )} | ||
| {subText && ( | ||
| <div className={`${prefix}--item__subtext`}>{subText}</div> | ||
| )} | ||
| </div> | ||
| <div className={`${prefix}--item__right`}> | ||
| {hint && <div className={`${prefix}--item__hint`}>{hint}</div>} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| Item.propTypes = { | ||
| /** | ||
| * Provide the description for the item content | ||
| */ | ||
| children: PropTypes.node, | ||
|
|
||
| /** | ||
| * Provide the title for the item contet | ||
| */ | ||
| title: PropTypes.node, | ||
|
|
||
| /** | ||
| * Provide the icon for the item content | ||
| */ | ||
| icon: PropTypes.node, | ||
|
|
||
| /** | ||
| * Provide one or multiple buttons | ||
| */ | ||
| button: PropTypes.node, | ||
|
|
||
| /** | ||
| * Provide a custom className to be applied to the containing <a> node | ||
| */ | ||
| className: PropTypes.string, | ||
|
|
||
| /** | ||
| * Provide a kind to use different appearances. | ||
| */ | ||
| kind: PropTypes.oneOf(['undefined', 'large']), | ||
|
|
||
| /** | ||
| * Provide a wrap to use different borders. | ||
| */ | ||
| wrapper: PropTypes.oneOf(['undefined', 'sidebar']), | ||
| }; | ||
|
|
||
| export default Item; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from 'react'; | ||
| import markdown from './README.mdx'; | ||
| import Item from '.'; | ||
| import Button from '../Button'; | ||
| import Tag from '../Tag'; | ||
|
|
||
| export default { | ||
| title: 'Components/UI Elements/Item', | ||
| component: Item, | ||
| parameters: { | ||
| componentSubtitle: 'Component', | ||
| status: 'experimental', | ||
| mdx: markdown, | ||
| }, | ||
| }; | ||
|
|
||
| export const Regular = (args) => <Item {...args} />; | ||
|
|
||
| Regular.args = { | ||
| title: 'A title is shown', | ||
| children: `nonumy eirmod tempor invidunt`, | ||
| subText: `This is the subText. 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. `, | ||
| icon: ( | ||
| <img | ||
| alt="Moving van" | ||
| src="https://www.wfp.org/sites/default/files/styles/medium/public/images/publication/YiR_banner.jpg" | ||
| /> | ||
| ), | ||
| showAdditionalIcon: true, | ||
| additional: 'Yesterday', | ||
| hint: <Tag kind="wfp">Hint</Tag>, | ||
| wrapper: 'button', | ||
| }; | ||
|
|
||
| export const Horizontal = (args) => <Item {...args} />; | ||
|
|
||
| Horizontal.args = { | ||
| title: 'A title is shown', | ||
| children: `nonumy eirmod tempor invidunt`, | ||
| subText: `This is the subText. 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. `, | ||
| kind: 'horizontal', | ||
| icon: ( | ||
| <img | ||
| alt="Moving van" | ||
| src="https://www.wfp.org/sites/default/files/styles/medium/public/images/publication/YiR_banner.jpg" | ||
| /> | ||
| ), | ||
| showAdditionalIcon: true, | ||
| additional: 'Yesterday', | ||
| hint: <Tag kind="wfp">Hint</Tag>, | ||
| wrapper: 'sidebar', | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| Empty states are a way to improve the user experience of your product, from onboarding to encouraging users to interact with your app. They are screens in your UI that are not yet full of information. That is to say, they will eventually have content on them when the user populates them. | ||
|
|
||
| The component should usually cover the whole area of the section and have a slightly darker background than the regular content. It can be also used for large notification messages. | ||
|
|
||
| ### Types of empty states | ||
|
|
||
| - **First use** – Occurs with a new product or service when there is still nothing to show, such as a new Evernote or Dropbox account. | ||
| - **User cleared** – Occurs when users complete actions such as clearing their inbox or task list, and the result is an empty screen. | ||
| - **Errors** – These occur when something goes wrong, or when there are issues such as a mobile phone going offline due to network problems. | ||
| - **No results/No data** – Occurs when there is nothing to show. This can happen if someone performs a search and the query is empty or there isn’t data available to show (when filtering for a date-range that has no data for example). | ||
|
|
||
| ### When to use | ||
|
|
||
| - ✓ Can be the case for a empty list table or search results | ||
| - ✓ Cover the whole area where normally content would be displayed | ||
| - ✓ Add personality by adding an illustration or icon (for example by using FontAwesome) | ||
| - ✓ Tell your user to do something: provide a call-to-action button | ||
| - ✓ Can be also used for large notification messages | ||
|
|
||
| ### Related | ||
|
|
||
| [Button](?path=/docs/components-button--button-regular) | ||
|
|
||
| ### Reference | ||
|
|
||
| [Breakfree Graphics Empty States – The Most Overlooked Aspect of UX](https://www.breakfreegraphics.com/design-blog/empty-states-the-most-overlooked-aspect-of-ux/) | ||
|
|
||
| [justinmind Everything you need to know about empty state design](https://www.justinmind.com/blog/everything-you-need-to-know-about-empty-state-design/) |
Oops, something went wrong.