-
Notifications
You must be signed in to change notification settings - Fork 78
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(emptystate): add inital emptystate component
- Loading branch information
jonguenther
committed
Nov 11, 2020
1 parent
76c42fa
commit c9b6c67
Showing
19 changed files
with
1,626 additions
and
0 deletions.
There are no files selected for viewing
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,117 @@ | ||
| /** | ||
| * IBM Confidential | ||
| * OCO Source Materials | ||
| * 5900-A0N | ||
| * © Copyright IBM Corp. 2020 | ||
| * The source code for this program is not published or otherwise divested of its | ||
| * trade secrets, irrespective of what has been deposited with the U.S. Copyright | ||
| * Office. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import Button from '../Button'; | ||
| import Link from '../Link'; | ||
| import { settings } from '../../constants/Settings'; | ||
| import { | ||
| EmptystateError as ErrorImage, | ||
| Emptystate404 as Error404Image, | ||
| EmptystateDefault as EmptyImage, | ||
| EmptystateSuccess as SuccessImage, | ||
| EmptystateNoresults as NoResultImage, | ||
| EmptystateNotauthorized as NotAuthImage, | ||
| } from '../../icons/components'; | ||
|
|
||
| const { iotPrefix } = settings; | ||
|
|
||
| const images = { | ||
| error: ErrorImage, | ||
| 404: Error404Image, | ||
| empty: EmptyImage, | ||
| 'not-authorized': NotAuthImage, | ||
| 'no-result': NoResultImage, | ||
| success: SuccessImage, | ||
| }; | ||
|
|
||
| const actionProp = PropTypes.oneOfType([ | ||
| PropTypes.func, | ||
| PropTypes.shape({ | ||
| label: PropTypes.string, | ||
| onClick: PropTypes.func, | ||
| }), | ||
| ]); | ||
|
|
||
| const props = { | ||
| /** Title of empty state */ | ||
| title: PropTypes.string, | ||
| /** Description of empty state */ | ||
| text: PropTypes.string, | ||
| /** Type of state */ | ||
| type: PropTypes.oneOf(Object.keys(images)), | ||
| /** Specify actions for container */ | ||
| actions: PropTypes.shape({ | ||
| button: actionProp, | ||
| link: actionProp, | ||
| }), | ||
| /** Specify an optional className to be applied to the container */ | ||
| className: PropTypes.string, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| title: 'Please set a state title', | ||
| text: 'Please set a state description', | ||
| actions: {}, | ||
| type: 'empty', | ||
| className: '', | ||
| }; | ||
|
|
||
| /** | ||
| * Component to set empty states | ||
| * For reference, visit https://pages.github.ibm.com/ai-applications/design/components/empty-states/usage/ | ||
| */ | ||
| const EmptyState = ({ title, type, text, actions, className }) => ( | ||
| <div className={`${iotPrefix}--empty-state ${className}`}> | ||
| <div className={`${iotPrefix}--empty-state--content`}> | ||
| {React.createElement(images[type], { | ||
| className: `${iotPrefix}--empty-state--icon`, | ||
| alt: '', | ||
| })} | ||
| <h3 className={`${iotPrefix}--empty-state--title`}>{title}</h3> | ||
| <p className={`${iotPrefix}--empty-state--text`}>{text}</p> | ||
| {actions && ( | ||
| <> | ||
| {actions.button && ( | ||
| <div className={`${iotPrefix}--empty-state--action`}> | ||
| {actions.button.label ? ( | ||
| <Button | ||
| onClick={actions.button.onClick && actions.button.onClick}> | ||
| {actions.button.label} | ||
| </Button> | ||
| ) : ( | ||
| actions.button | ||
| )} | ||
| </div> | ||
| )} | ||
| {actions.link && ( | ||
| <div className={`${iotPrefix}--empty-state--link`}> | ||
| {actions.link.label ? ( | ||
| // eslint-disable-next-line jsx-a11y/anchor-is-valid | ||
| <Link onClick={actions.link.onClick && actions.link.onClick}> | ||
| {actions.link.label} | ||
| </Link> | ||
| ) : ( | ||
| actions.link | ||
| )} | ||
| </div> | ||
| )} | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| EmptyState.propTypes = props; | ||
| EmptyState.defaultProps = defaultProps; | ||
|
|
||
| export default EmptyState; |
Empty file.
Empty file.
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,40 @@ | ||
| .safety--empty-state { | ||
| display: flex; | ||
| flex-flow: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 100%; | ||
| padding: $spacing-06; | ||
| &--icon { | ||
| margin-bottom: $spacing-05; | ||
| height: 80px; | ||
| width: auto; | ||
| } | ||
|
|
||
| &--content { | ||
| text-align: left; | ||
| } | ||
|
|
||
| &--title { | ||
| @include type-style('productive-heading-03'); | ||
| color: $text-01; | ||
| text-align: left; | ||
| margin-bottom: $spacing-03; | ||
| } | ||
|
|
||
| &--text { | ||
| color: $text-01; | ||
| text-align: left; | ||
| @include type-style('body-short-01'); | ||
| } | ||
|
|
||
| &--action { | ||
| margin-top: $spacing-06; | ||
| } | ||
|
|
||
| &--link { | ||
| margin-top: $spacing-05; | ||
| @include type-style('body-short-01'); | ||
| color: $interactive-01; | ||
| } | ||
| } |
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,101 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| function SvgEmptystate404(props) { | ||
| return ( | ||
| <svg width={80} height={80} {...props}> | ||
| <defs> | ||
| <linearGradient | ||
| x1="54.837%" | ||
| y1="56.704%" | ||
| x2="34.436%" | ||
| y2="36.281%" | ||
| id="emptystate-404_svg__a"> | ||
| <stop stopColor="#5C5C5C" offset="0%" /> | ||
| <stop stopColor="#B2B2B2" offset="98%" /> | ||
| </linearGradient> | ||
| <linearGradient | ||
| x1="52.286%" | ||
| y1="35.257%" | ||
| x2="20.038%" | ||
| y2="99.807%" | ||
| id="emptystate-404_svg__b"> | ||
| <stop stopColor="#D4D4D4" offset="0%" /> | ||
| <stop stopColor="#757575" offset="100%" /> | ||
| </linearGradient> | ||
| <linearGradient | ||
| x1="36.118%" | ||
| y1="88.863%" | ||
| x2="58.465%" | ||
| y2="81.744%" | ||
| id="emptystate-404_svg__c"> | ||
| <stop stopOpacity={0} offset="0%" /> | ||
| <stop stopOpacity={0.37} offset="98%" /> | ||
| </linearGradient> | ||
| <linearGradient | ||
| x1="-133.356%" | ||
| y1="3308.565%" | ||
| x2="-127.214%" | ||
| y2="3313.015%" | ||
| id="emptystate-404_svg__d"> | ||
| <stop stopOpacity={0} offset="0%" /> | ||
| <stop stopOpacity={0.37} offset="98%" /> | ||
| </linearGradient> | ||
| <linearGradient | ||
| x1="54.886%" | ||
| y1="0%" | ||
| x2="54.886%" | ||
| y2="158.279%" | ||
| id="emptystate-404_svg__e"> | ||
| <stop stopOpacity={0} offset="0%" /> | ||
| <stop stopOpacity={0.345} offset="47.927%" /> | ||
| <stop stopOpacity={0.37} offset="100%" /> | ||
| </linearGradient> | ||
| </defs> | ||
| <g fillRule="nonzero" fill="none"> | ||
| <path | ||
| d="M.05 22.713l38.714 22.303 38.572-22.303L38.62.409z" | ||
| transform="translate(2.143 27.804)" | ||
| fill="url(#emptystate-404_svg__a)" | ||
| /> | ||
| <path | ||
| d="M.036.402l.15 44.607 38.571-22.304z" | ||
| transform="translate(40.714 27.804)" | ||
| fill="url(#emptystate-404_svg__b)" | ||
| /> | ||
| <path | ||
| d="M0 8.358l10.307 5.94 7.55-2.36L13.871.357z" | ||
| transform="translate(2.143 42.152)" | ||
| fill="url(#emptystate-404_svg__c)" | ||
| /> | ||
| <path | ||
| d="M16.064 11.945L12.093.365.357 7.175l12.55 34.148 10.236-4.154z" | ||
| transform="translate(25 29.957)" | ||
| fill="url(#emptystate-404_svg__d)" | ||
| /> | ||
| <path | ||
| d="M9.214 22.022L4.93 24.533l11.914 34.514 6.65 3.838c0-.05 0-.108-.057-.165-1.476-4.381-2.86-8.463-4.15-12.246-4.52-13.2-7.853-22.684-10-28.452h-.072m37.143 47.6l4.357-2.519A5448.833 5448.833 0 0045 50.473C37.605 28.819 32.869 15.24 30.793 9.74l-4.286 2.504 19.85 57.377z" | ||
| fill="#E6E6E6" | ||
| /> | ||
| <path | ||
| d="M26.429 12.244L22.07 9.74l21.322 61.574 2.936-1.693-19.9-57.377M4.907 24.533l-4.364-2.51 12.028 34.57 4.286 2.454-11.95-34.514z" | ||
| fill="#A6A6A6" | ||
| /> | ||
| <path | ||
| d="M35.557 69.7l3.572 2.059 5.842-3.228-1.221-3.587-8.207 4.734m-15.336-8.666l.329.187-.35-.187m18.571-10.337l-1.221-3.544-16.2 9.369c.38 1.148.785 2.343 1.214 3.587l16.207-9.412m-7.536-22.117L30 24.97l-16.279 9.433c.393 1.127.8 2.296 1.222 3.523l16.278-9.37z" | ||
| fill="#CECECE" | ||
| /> | ||
| <path | ||
| d="M32.779 68.2l2.628 1.536 8.329-4.814-2.629-1.5-8.328 4.779m4.728-21.113l-2.621-1.507L20.45 53.89c.279.839.564 1.686.857 2.546l16.2-9.326M12.793 31.822c.293.818.586 1.657.878 2.51L30 24.936 27.343 23.4l-14.55 8.422zM9.186 21.986h.035l-4.335-2.518L.52 21.986l4.365 2.511 4.285-2.51M26.43 7.178L22.064 9.69l4.365 2.518 4.285-2.518-4.285-2.51z" | ||
| fill="#FFF" | ||
| /> | ||
| <path | ||
| d="M0 .43l38.729 22.304L77.3.43z" | ||
| transform="translate(2.143 50.043)" | ||
| fill="url(#emptystate-404_svg__e)" | ||
| /> | ||
| </g> | ||
| </svg> | ||
| ); | ||
| } | ||
|
|
||
| export default SvgEmptystate404; |
Oops, something went wrong.