npm - @transferwise/components - Versions diffs - 0.0.0-experimental-e9f4151 → 0.0.0-experimental-ffa47f4 - Mend

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 import {
@@ -19,8 +20,22 @@ export default {
   tags: ['autodocs'],
 };
-const Template = (props) => {
-  const href = text('href', props.href);
+type TemplateTypes = {
+  href?: string;
+  title?: string;
+  content?: string;
+  complex?: boolean;
+  disabled?: boolean;
+  showMediaAtAllSizes?: boolean;
+  showMediaCircle?: boolean;
+  isContainerAligned?: boolean;
+  className?: string;
+  hasTitleOnly?: boolean;
+  media?: ReactNode;
+};
+const Template = (props: TemplateTypes) => {
+  const href = text('href', props.href ?? '');
   const title = text('title', props.title ?? 'Navigation option');
   const content = text('content', props.content ?? 'Button and icon are vertically centered.');
   const complex = boolean('complex', props.complex ?? false);
@@ -28,7 +43,7 @@ const Template = (props) => {
   const showMediaAtAllSizes = boolean('showMediaAtAllSizes', props.showMediaAtAllSizes ?? false);
   const showMediaCircle = props.showMediaCircle ?? boolean('showMediaCircle', true);
   const isContainerAligned = boolean('isContainerAligned', false);
-  const className = text('className', props.className);
+  const className = text('className', props.className ?? '');
   return (
     <NavigationOption
@@ -140,7 +155,10 @@ export const Multiple = () => (
 export const WithIllustration = () => {
   return (
-    <Template media={<Illustration name={Assets.GLOBE} disablePadding />} showMediaCircle={false} />
+    <Template
+      media={<Illustration name={Assets.GLOBE} disablePadding alt="" />}
+      showMediaCircle={false}
+    />
   );
 };
@@ -166,7 +184,7 @@ export const WithContainerContent = () => (
   </>
 );
-const NavigationOptionTemplate = (props) => {
+const NavigationOptionTemplate = (props: TemplateTypes) => {
   const {
     href,
     title,

@@ -6,7 +6,7 @@ import { Position } from '../common';
 import Option from '../common/Option';
 import { OptionProps, ReferenceType } from '../common/Option/Option';
-type NavigationOptionProps = OptionProps;
+export type NavigationOptionProps = OptionProps;
 const NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
   ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {

@@ -16,8 +16,10 @@ export default {
 };
 export const Basic = () => {
+  const timeout = number('timeout (ms)', 10000000);
   return (
-    <SnackbarProvider>
+    <SnackbarProvider timeout={timeout}>
       <SnackbarConsumer>
         {({ createSnackbar }) => (
           <Button

@@ -95,7 +95,7 @@ export class Snackbar extends Component<SnackbarProps, SnackbarState> {
     const { timeout } = this.props;
     return (
-      <div className="snackbar" aria-live="assertive" role="alert">
+      <div className="snackbar">
         <CSSTransition
           nodeRef={this.bodyRef}
           in={visible}
@@ -107,7 +107,13 @@ export class Snackbar extends Component<SnackbarProps, SnackbarState> {
           }}
           unmountOnExit
         >
-          <Body ref={this.bodyRef} as="span" className="snackbar__text">
+          <Body
+            ref={this.bodyRef}
+            as="span"
+            className="snackbar__text"
+            role="status"
+            aria-live="assertive"
+          >
             {text}
             {action ? (
               <ActionButton className="snackbar__text__action" onClick={action.onClick}>

@transferwise/components 0.0.0-experimental-e9f4151 → 0.0.0-experimental-ffa47f4