-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(packages): add inline Alert component (#106) Add inline alert component to feedback indicators based on Figma sketches: https://www.figma.com/file/gpHv46zswMNeepUDyQfpS8/Feedback-indicators?node-id=274%3A31588 ### Features * **packages:** add inline Alert component ([#106](#106)) ([ddfe084](ddfe084)) * docs: don't disable button on modal * feat(alert): add expand and collapse behaviour to inline alert (#114) * refactor(expandable): extract transition animation from Expandable Create AnimatedExpansion component that handles expand-collapse animation in Expandable, making it possible to easily add this behaviour to other components. * feat(alert): add expansion and collapsion behaviour to inline alert Wrap Alert in AnimatedExpansion component to make it appear and disappear smoothly * feat(alert): remove neutral variant of inline alert * **alert:** add expand and collapse behaviour to inline alert ([#114](#114)) ([075f314](075f314)) * fix(affix): Add aria-label to Affix icons Screen readers will use the aria-label on the SVG only if the button wrapper has no label. So in that sense, these default labels are like fallbacks. * chore(release): 1.2.0-next.3 [skip ci] # [1.2.0-next.3](v1.2.0-next.2...v1.2.0-next.3) (2022-06-07) ### Bug Fixes * **affix:** Add aria-label to Affix icons ([17fab00](17fab00)) * fix: bump component-classes to get Step fix * chore(deps): change to css/component-classes * fix(animated-expansion): rename to ExpandTransition and check if element ref exists (#119) Fixes an error 'Argument of type 'null' is not assignable to parameter of type 'HTMLElement'. * chore(release): 1.2.0-next.4 [skip ci] # [1.2.0-next.4](v1.2.0-next.3...v1.2.0-next.4) (2022-06-08) ### Bug Fixes * **animated-expansion:** rename to ExpandTransition and check if element ref exists ([#119](#119)) ([b7a8026](b7a8026)) * bump component-classes to get Step fix ([5d99506](5d99506)) * chore(release): 1.2.0-next.5 [skip ci] # [1.2.0-next.5](v1.2.0-next.4...v1.2.0-next.5) (2022-06-08) ### Bug Fixes * bump component-classes to get Step fix ([c17ce7e](c17ce7e)) Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net> Co-authored-by: Richard Walker <digitalsadhu@gmail.com> Co-authored-by: Martin Storsletten <martin.storsletten@finn.no> Co-authored-by: Benjamin Akar <benjaminakar2001@gmail.com> Co-authored-by: Dave Honneffer <pearofducks@gmail.com>
- Loading branch information
6 people
authored
Jun 8, 2022
1 parent
c17ce7e
commit 289290f
Showing
23 changed files
with
468 additions
and
38 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
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
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,53 @@ | ||
| import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'; | ||
| import { collapse, expand } from 'element-collapse'; | ||
| import { classNames } from '@chbphone55/classnames'; | ||
|
|
||
| export function ExpandTransition({ | ||
| show, | ||
| children, | ||
| }: PropsWithChildren<{ show?: Boolean }>) { | ||
| const [isExpanded, setIsExpanded] = useState(show); | ||
| const expandableRef = useRef<HTMLDivElement>(null); | ||
| const isMounted = useRef(false); | ||
|
|
||
| async function collapseElement(el: HTMLElement) { | ||
| await new Promise((resolve) => { | ||
| collapse(el, resolve); | ||
| }); | ||
| setIsExpanded(false); | ||
| } | ||
|
|
||
| function expandElement(el: HTMLElement) { | ||
| expand(el); | ||
| setIsExpanded(true); | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| // Don't do anything at first render | ||
| if (!isMounted.current) { | ||
| isMounted.current = true; | ||
| return; | ||
| } | ||
|
|
||
| if (!expandableRef.current) return; | ||
|
|
||
| if (show) { | ||
| expandElement(expandableRef.current); | ||
| } else { | ||
| collapseElement(expandableRef.current); | ||
| } | ||
| }, [show]); | ||
|
|
||
| return ( | ||
| <div | ||
| ref={expandableRef} | ||
| className={classNames({ | ||
| 'overflow-hidden': true, | ||
| 'h-0 invisible': !isExpanded, | ||
| })} | ||
| aria-hidden={!isExpanded} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| } |
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 |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| export { Clickable } from './clickable'; | ||
| export { DeadToggle } from './dead-toggle'; | ||
| export { Affix } from './affix'; | ||
| export { ExpandTransition } from './expand-transition'; |
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,80 @@ | ||
| import { Alert } from '../src'; | ||
| import { Button } from '../../button/src'; | ||
|
|
||
| # Alert | ||
|
|
||
| Alert is an inline component used for displaying different types of messages. | ||
|
|
||
| ## Import | ||
|
|
||
| ```js | ||
| import { Alert } from '@fabric-ds/react'; | ||
| ``` | ||
|
|
||
| ## Visual Options | ||
|
|
||
| ### Expandable behaviour | ||
|
|
||
| ```jsx example | ||
| function ExpandableAlert() { | ||
| const [show, setShow] = React.useState(true); | ||
|
|
||
| return ( | ||
| <> | ||
| <Alert type="info" show={show}> | ||
| <p className="font-bold">Title Caption-Strong</p> | ||
| <p>This is the message text that can be short or a little bit long</p> | ||
| <a>Link to more information</a> | ||
| <div className="mt-8 space-x-8"> | ||
| <Button small>Primary CTA</Button> | ||
| <Button small secondary quiet> | ||
| Secondary | ||
| </Button> | ||
| </div> | ||
| </Alert> | ||
|
|
||
| <Button className="mt-16" small primary onClick={() => setShow(!show)}> | ||
| {show ? 'Hide alert' : 'Show alert'} | ||
| </Button> | ||
| </> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ### Negative | ||
|
|
||
| ```jsx example | ||
| <Alert type="negative" show> | ||
| This is the message text that can be short or a little bit long | ||
| </Alert> | ||
| ``` | ||
|
|
||
| ### Positive | ||
|
|
||
| ```jsx example | ||
| <Alert type="positive" show> | ||
| This is the message text that can be short or a little bit long | ||
| </Alert> | ||
| ``` | ||
|
|
||
| ### Warning | ||
|
|
||
| ```jsx example | ||
| <Alert type="warning" show> | ||
| This is the message text that can be short or a little bit long | ||
| </Alert> | ||
| ``` | ||
|
|
||
| ### Info | ||
|
|
||
| ```jsx example | ||
| <Alert type="info" show> | ||
| This is the message text that can be short or a little bit long | ||
| </Alert> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| ```props packages/alert/src/component.tsx | ||
|
|
||
| ``` |
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,123 @@ | ||
| import { classNames } from '@chbphone55/classnames'; | ||
| import React, { PropsWithChildren, ReactElement } from 'react'; | ||
| import { AlertProps } from '.'; | ||
| import { ExpandTransition } from '../../_helpers'; | ||
|
|
||
| export function Alert({ | ||
| show, | ||
| type, | ||
| children, | ||
| ...props | ||
| }: PropsWithChildren<AlertProps>) { | ||
| const { color, icon } = styleMap[type]; | ||
|
|
||
| return ( | ||
| <ExpandTransition show={show}> | ||
| <div | ||
| className={classNames( | ||
| props.className, | ||
| `flex p-16 border rounded-4 border-l-4 bg-${color}-50 border-${color}-300`, | ||
| )} | ||
| style={{ borderLeftColor: `var(--f-${color}-600)`, ...props.style }} | ||
| > | ||
| <div className={`mr-8 text-${color}-600`}>{icon}</div> | ||
| <div className="last-child:mb-0 text-14">{children}</div> | ||
| </div> | ||
| </ExpandTransition> | ||
| ); | ||
| } | ||
|
|
||
| const styleMap: { | ||
| [key in AlertProps['type']]: { color: String; icon: ReactElement }; | ||
| } = { | ||
| negative: { | ||
| color: 'red', | ||
| icon: ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="16" | ||
| height="16" | ||
| fill="none" | ||
| > | ||
| <path | ||
| d="M4.1.586A2 2 0 0 1 5.516 0h4.97A2 2 0 0 1 11.9.586L15.413 4.1A2 2 0 0 1 16 5.514v4.97a2 2 0 0 1-.586 1.415L11.9 15.413a2 2 0 0 1-1.415.586h-4.97a2 2 0 0 1-1.414-.586L.586 11.9A2 2 0 0 1 0 10.485v-4.97A2 2 0 0 1 .586 4.1L4.1.586Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M8 3.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V4A.75.75 0 0 1 8 3.25Z" | ||
| fill="#fff" | ||
| /> | ||
| <path d="M8.8 11.8a.8.8 0 1 1-1.6 0 .8.8 0 0 1 1.6 0Z" fill="#fff" /> | ||
| </svg> | ||
| ), | ||
| }, | ||
| positive: { | ||
| color: 'green', | ||
| icon: ( | ||
| <svg | ||
| width="16" | ||
| height="16" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <circle | ||
| cx="8" | ||
| cy="8" | ||
| r="8" | ||
| transform="rotate(180 8 8)" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M11.5 4.94c.3.27.34.75.06 1.06l-4 4.5a.75.75 0 0 1-1.09.03l-2-2a.75.75 0 0 1 1.06-1.06l1.44 1.44L10.44 5a.75.75 0 0 1 1.06-.07Z" | ||
| fill="#fff" | ||
| /> | ||
| </svg> | ||
| ), | ||
| }, | ||
| warning: { | ||
| color: 'yellow', | ||
| icon: ( | ||
| <svg | ||
| width="16" | ||
| height="16" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M.24 12 6.16 1.09a2.1 2.1 0 0 1 3.68 0l5.92 10.93c.73 1.36-.28 2.99-1.85 2.99H2.1a2.04 2.04 0 0 1-1.85-3Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M8 3.25c.41 0 .75.34.75.75v5a.75.75 0 0 1-1.5 0V4c0-.41.34-.75.75-.75Z" | ||
| fill="#fff" | ||
| /> | ||
| <path d="M8.8 11.8a.8.8 0 1 1-1.6 0 .8.8 0 0 1 1.6 0Z" fill="#fff" /> | ||
| </svg> | ||
| ), | ||
| }, | ||
| info: { | ||
| color: 'aqua', | ||
| icon: ( | ||
| <svg | ||
| width="16" | ||
| height="16" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <circle cx="8" cy="8" r="8" fill="currentColor" /> | ||
| <path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M7.25 12a.75.75 0 0 0 1.5 0V8a.75.75 0 0 0-1.5 0v4ZM8 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z" | ||
| fill="#fff" | ||
| /> | ||
| </svg> | ||
| ), | ||
| }, | ||
| }; |
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,2 @@ | ||
| export { Alert } from './component'; | ||
| export type { AlertProps } from './props'; |
Oops, something went wrong.