@ilo-org/react 0.0.18 → 0.1.1

package/src/components/Button/Button.args.ts

@@ -1,481 +1,26 @@
 import { ButtonProps } from "./Button.props";
 
-const large: ButtonProps = {
-  label: "Large Button",
-  size: "large",
-  target: "_blank",
-  type: "primary",
-  url: "#",
-};
-
-const medium: ButtonProps = {
-  label: "Medium Button",
-  size: "medium",
-  type: "primary",
-  url: "#",
-};
-
-const small: ButtonProps = {
-  label: "Small Button",
-  size: "small",
-  type: "primary",
-  url: "#",
-};
-
 const primary: ButtonProps = {
-  label: "Primary Button",
-  size: "large",
   type: "primary",
-  url: "",
-};
-
-const secondary: ButtonProps = {
-  label: "Secondary Button",
-  size: "large",
-  type: "secondary",
-  url: "",
-};
-
-const tertiary: ButtonProps = {
-  label: "Tertiary Button",
-  size: "large",
-  type: "tertiary",
-  url: "",
-};
-
-const secondarym: ButtonProps = {
-  label: "Secondary medium",
-  size: "medium",
-  type: "secondary",
-  url: "",
-};
-
-const tertiarym: ButtonProps = {
-  label: "Tertiary Medium",
+  label: "Primary",
   size: "medium",
-  type: "tertiary",
-  url: "",
-};
-
-const secondarysm: ButtonProps = {
-  label: "Secondary Small",
-  size: "small",
-  type: "secondary",
-  url: "",
-};
-
-const tertiarysm: ButtonProps = {
-  label: "Tertiary Small",
-  size: "small",
-  type: "tertiary",
-  url: "",
-};
-
-const alertm: ButtonProps = {
-  label: "Alert Medium",
-  size: "medium",
-  type: "alert",
-  url: "",
-};
-
-const alertsm: ButtonProps = {
-  label: "Alert Small",
-  size: "small",
-  type: "alert",
-  url: "",
-};
-
-const alert: ButtonProps = {
-  label: "Alert Button",
-  size: "large",
-  type: "alert",
-  url: "",
 };
-
+const secondary: ButtonProps = { type: "secondary", label: "Secondary" };
+const tertiary: ButtonProps = { type: "tertiary", label: "Tertiary" };
+const alert: ButtonProps = { type: "alert", label: "Alert" };
+const icon: ButtonProps = { type: "primary", label: "Icon", icon: "close" };
 const disabled: ButtonProps = {
-  disabled: true,
-  label: "Disabled Button",
-  size: "large",
-  type: "primary",
-  url: "",
-};
-
-const disabledm: ButtonProps = {
-  disabled: true,
-  label: "Disabled Button",
-  size: "medium",
   type: "primary",
-  url: "",
-};
-
-const disabledsm: ButtonProps = {
+  label: "Disabled",
   disabled: true,
-  label: "Disabled Button",
-  size: "small",
-  type: "primary",
-  url: "",
-};
-
-const iconleftlgprimary: ButtonProps = {
-  callback: "",
-  children: "",
-  icon: "close",
-  label: "Icon on left",
-  size: "large",
-  type: "primary",
-  url: "",
-};
-
-const iconleftmprimary: ButtonProps = {
-  icon: "close",
-  label: "Icon on left",
-  size: "medium",
-  type: "primary",
-  url: "",
-};
-
-const iconleftsmprimary: ButtonProps = {
-  icon: "close",
-  label: "Icon on left",
-  size: "small",
-  type: "primary",
-  url: "",
-};
-
-const iconrightlgprimary: ButtonProps = {
-  icon: "close",
-  iconPosition: "right",
-  label: "Icon on right",
-  size: "large",
-  type: "primary",
-  url: "",
 };
-
-const iconrightmprimary: ButtonProps = {
-  icon: "close",
-  iconPosition: "right",
-  label: "Icon on right",
-  size: "medium",
+const link: ButtonProps = {
   type: "primary",
-  url: "",
-};
-
-const iconrightsmprimary: ButtonProps = {
-  icon: "close",
-  iconPosition: "right",
-  label: "Icon on right",
-  size: "small",
-  type: "primary",
-  url: "",
-};
-
-const iconleftlgsecondary: ButtonProps = {
-  icon: "close",
-  label: "Icon on left",
-  size: "large",
-  type: "secondary",
-  url: "",
-};
-
-const iconleftmsecondary: ButtonProps = {
-  icon: "close",
-  label: "Icon on left",
-  size: "medium",
-  type: "secondary",
-  url: "",
-};
-
-const iconleftsmsecondary: ButtonProps = {
-  icon: "close",
-  label: "Icon on left",
-  size: "small",
-  type: "secondary",
-  url: "",
-};
-
-const iconrightlgsecondary: ButtonProps = {
-  icon: "close",
-  iconPosition: "right",
-  label: "Icon on right",
-  size: "large",
-  type: "secondary",
-  url: "",
-};
-
-const iconrightmsecondary: ButtonProps = {
-  icon: "close",
-  iconPosition: "right",
-  label: "Icon on right",
-  size: "medium",
-  type: "secondary",
-  url: "",
-};
-
-const iconrightsmsecondary: ButtonProps = {
-  icon: "close",
-  iconPosition: "right",
-  label: "Icon on right",
-  size: "small",
-  type: "secondary",
-  url: "",
-};
-
-const iconleftlgtertiary: ButtonProps = {
-  icon: "close",
-  label: "Icon on left",
-  size: "large",
-  type: "tertiary",
-  url: "",
-};
-
-const iconleftmtertiary: ButtonProps = {
-  icon: "close",
-  label: "Icon on left",
-  size: "medium",
-  type: "tertiary",
-  url: "",
-};
-
-const iconleftsmtertiary: ButtonProps = {
-  icon: "close",
-  label: "Icon on left",
-  size: "small",
-  type: "tertiary",
-  url: "",
-};
-
-const iconrightlgtertiary: ButtonProps = {
-  icon: "close",
-  iconPosition: "right",
-  label: "Icon on right",
-  size: "large",
-  type: "tertiary",
-  url: "",
-};
-
-const iconrightmtertiary: ButtonProps = {
-  icon: "close",
-  iconPosition: "right",
-  label: "Icon on right",
-  size: "medium",
-  type: "tertiary",
-  url: "",
-};
-
-const iconrightsmtertiary: ButtonProps = {
-  icon: "close",
-  iconPosition: "right",
-  label: "Icon on right",
-  size: "small",
-  type: "tertiary",
-  url: "",
-};
-
-const iconleftlgalert: ButtonProps = {
-  icon: "close",
-  label: "Icon on left",
-  size: "large",
-  type: "alert",
-  url: "",
-};
-
-const iconleftmalert: ButtonProps = {
-  icon: "close",
-  label: "Icon on left",
-  size: "medium",
-  type: "alert",
-  url: "",
-};
-
-const iconleftsmalert: ButtonProps = {
-  icon: "close",
-  label: "Icon on left",
-  size: "small",
-  type: "alert",
-  url: "",
-};
-
-const iconrightlgalert: ButtonProps = {
-  icon: "close",
-  iconPosition: "right",
-  label: "Icon on right",
-  size: "large",
-  type: "alert",
-  url: "",
-};
-
-const iconrightmalert: ButtonProps = {
-  icon: "close",
-  iconPosition: "right",
-  label: "Icon on right",
-  size: "medium",
-  type: "alert",
-  url: "",
-};
-
-const iconrightsmalert: ButtonProps = {
-  icon: "close",
+  icon: "arrowright",
   iconPosition: "right",
-  label: "Icon on right",
-  size: "small",
-  type: "alert",
-  url: "",
-};
-
-const icononlylgprimary: ButtonProps = {
-  callback: "",
-  children: "",
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "large",
-  type: "primary",
-};
-
-const icononlymprimary: ButtonProps = {
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "medium",
-  type: "primary",
-};
-
-const icononlysmprimary: ButtonProps = {
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "small",
-  type: "primary",
-};
-
-const icononlylgsecondary: ButtonProps = {
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "large",
-  type: "secondary",
-};
-
-const icononlymsecondary: ButtonProps = {
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "medium",
-  type: "secondary",
-};
-
-const icononlysmsecondary: ButtonProps = {
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "small",
-  type: "secondary",
-};
-
-const icononlylgtertiary: ButtonProps = {
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "large",
-  type: "tertiary",
-};
-
-const icononlymtertiary: ButtonProps = {
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "medium",
-  type: "tertiary",
-};
-
-const icononlysmtertiary: ButtonProps = {
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "small",
-  type: "tertiary",
-};
-
-const icononlylgalert: ButtonProps = {
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "large",
-  type: "alert",
-};
-
-const icononlymalert: ButtonProps = {
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "medium",
-  type: "alert",
-};
-
-const icononlysmalert: ButtonProps = {
-  icon: "close",
-  icononly: true,
-  label: "Icon only",
-  size: "small",
-  type: "alert",
-};
-
-/**
- * Sample prop definitions for Button's enumerable properties (imported in stories and tests).
- */
-const ButtonArgs = {
-  large,
-  medium,
-  small,
-  primary,
-  secondary,
-  tertiary,
-  secondarym,
-  tertiarym,
-  secondarysm,
-  tertiarysm,
-  alert,
-  alertm,
-  alertsm,
-  disabled,
-  disabledm,
-  disabledsm,
-  iconleftlgprimary,
-  iconleftmprimary,
-  iconleftsmprimary,
-  iconrightlgprimary,
-  iconrightmprimary,
-  iconrightsmprimary,
-  iconleftlgsecondary,
-  iconleftmsecondary,
-  iconleftsmsecondary,
-  iconrightlgsecondary,
-  iconrightmsecondary,
-  iconrightsmsecondary,
-  iconleftlgtertiary,
-  iconleftmtertiary,
-  iconleftsmtertiary,
-  iconrightlgtertiary,
-  iconrightmtertiary,
-  iconrightsmtertiary,
-  iconleftlgalert,
-  iconleftmalert,
-  iconleftsmalert,
-  iconrightlgalert,
-  iconrightmalert,
-  iconrightsmalert,
-  icononlylgprimary,
-  icononlymprimary,
-  icononlysmprimary,
-  icononlylgsecondary,
-  icononlymsecondary,
-  icononlysmsecondary,
-  icononlylgtertiary,
-  icononlymtertiary,
-  icononlysmtertiary,
-  icononlylgalert,
-  icononlymalert,
-  icononlysmalert,
+  label: "Visit ilo.org",
+  url: "https://www.ilo.org",
+  target: "__blank",
 };
 
-export default ButtonArgs;
+export default { primary, secondary, tertiary, alert, icon, disabled, link };

package/src/components/Button/{Button.props.d.ts → Button.props.ts}

@@ -1,11 +1,16 @@
-import { ReactNode } from "react";
-import { buttonFunctions, buttonTypes } from "../../types";
+import React, { ReactNode } from "react";
+import {
+  ButtonFunctions,
+  ButtonTypes,
+  PositionTypes,
+  SizeTypes,
+} from "../../types";
 
 export interface ButtonProps {
   /**
    * Specify the callback of your Button.
    */
-  callback?: function;
+  callback?: (e: React.MouseEvent<Element, MouseEvent>) => any;
 
   /**
    * Specify the content of your Button.
@@ -30,7 +35,7 @@ export interface ButtonProps {
   /**
    * Specify the icon for the Button
    */
-  iconPosition?: positionTypes;
+  iconPosition?: PositionTypes;
 
   /**
    * Does this button display an icon only?
@@ -40,7 +45,7 @@ export interface ButtonProps {
   /**
    * Specify which function the button performs
    */
-  kind?: buttonFunctions;
+  kind?: ButtonFunctions;
 
   /**
    * Specify the label for the Button
@@ -55,7 +60,7 @@ export interface ButtonProps {
   /**
    * Specify an optional className to be added to your Button.
    */
-  size?: sizeTypes;
+  size?: SizeTypes;
 
   /**
    * Specify the target for when Button is really a link
@@ -65,10 +70,15 @@ export interface ButtonProps {
   /**
    * Specify an optional className to be added to your Button.
    */
-  type?: buttonTypes;
+  type?: ButtonTypes;
 
   /**
    * Specify the url for the Button's href
    */
   url?: string;
+
+  /**
+   * Inline styles to be applied to the rendered element
+   */
+  style?: React.CSSProperties;
 }

package/src/components/Button/Button.tsx

@@ -19,6 +19,7 @@ const Button: FC<ButtonProps> = ({
   target = "",
   type = "primary",
   url,
+  style,
 }) => {
   const { prefix } = useGlobalSettings();
   const baseClass = `${prefix}--button`;
@@ -45,7 +46,13 @@ const Button: FC<ButtonProps> = ({
   return (
     <>
       {hasURL ? (
-        <Link className={ButtonClasses} target={target} url={url} label={label}>
+        <Link
+          className={ButtonClasses}
+          target={target}
+          url={url}
+          label={label}
+          style={style}
+        >
           {icon && <Icon name={icon} hidden={true} />}
         </Link>
       ) : (
@@ -55,6 +62,7 @@ const Button: FC<ButtonProps> = ({
           disabled={disabled}
           type={kind}
           aria-haspopup={opensmodal ? `dialog` : false}
+          style={style}
         >
           {label && <span className="button__label">{label}</span>}
           {icon && <Icon name={icon} hidden={true} />}

package/src/components/Button/index.ts

@@ -1 +1,2 @@
 export { default as Button } from "./Button";
+export { default as buttonArgs } from "./Button.args";

package/src/components/Callout/Callout.args.ts

@@ -1,64 +1,38 @@
 import { CalloutProps } from "./Callout.props";
 
-const hascta: CalloutProps = {
-  className: "storybook",
+const baseArgs: CalloutProps = {
   copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  cta: {
-    label: "Optional CTA",
-    url: "http://www.google.com",
-  },
-  headline: "With CTA",
-  isCollapsible: true,
-  isOpen: false,
-  toggleOpenLabel: "Open",
-  toggleClosedLabel: "Closed",
+  isCollapsible: false,
+  headline: "Info Callout",
   type: "info",
 };
 
-const infoCallout: CalloutProps = {
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  isCollapsible: false,
-  headline: "Callout Title",
-  type: "info",
+const success: CalloutProps = {
+  ...baseArgs,
+  type: "success",
+  headline: "Success Callout",
+};
+
+const warning: CalloutProps = {
+  ...baseArgs,
+  type: "warning",
+  headline: "Warning Callout",
 };
 
-const errorCallout: CalloutProps = {
+const error: CalloutProps = {
+  ...baseArgs,
   cta: {
     label: "Optional CTA",
     url: "http://www.google.com",
   },
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   isCollapsible: true,
   isOpen: false,
-  headline: "Callout Title",
+  headline: "Error Callout (Collapsible)",
   toggleOpenLabel: "Open",
   toggleClosedLabel: "Closed",
   type: "error",
 };
 
-const successCallout: CalloutProps = {
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  isCollapsible: false,
-  headline: "Callout Title",
-  type: "success",
-};
-
-const warningCallout: CalloutProps = {
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  isCollapsible: false,
-  headline: "Callout Title",
-  type: "warning",
-};
-
-/**
- * Sample prop definitions for Callout's enumerable properties (imported in stories and tests).
- */
-const CalloutArgs = {
-  hascta,
-  infoCallout,
-  errorCallout,
-  warningCallout,
-  successCallout,
-};
+const CalloutArgs = { baseArgs, success, warning, error };
 
 export default CalloutArgs;

package/src/components/Callout/{Callout.props.d.ts → Callout.props.ts}

@@ -1,5 +1,4 @@
-import { ReactNode } from "react";
-import { calloutTypes } from "../../types";
+import { CalloutTypes } from "../../types";
 
 interface CTAProps {
   /**
@@ -57,5 +56,5 @@ export interface CalloutProps {
   /**
    * Describe the type of callout
    */
-  type?: calloutTypes;
+  type?: CalloutTypes;
 }

package/src/components/Callout/Callout.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect, FC } from "react";
 import classNames from "classnames";
+import React, { FC, useEffect, useState } from "react";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { CalloutProps } from "./Callout.props";
-import { ButtonProps } from "../Button/Button.props";
 import { Button } from "../Button";
+import { ButtonProps } from "../Button/Button.props";
+import { CalloutProps } from "./Callout.props";
 
 const Callout: FC<CalloutProps> = ({
   className,
@@ -36,7 +36,7 @@ const Callout: FC<CalloutProps> = ({
   const iconClasses = `icon icon--${type}`;
 
   const ctaprops: ButtonProps = {
-    callback: false,
+    callback: undefined,
     className: `${baseClass}--cta`,
     children: false,
     label: cta?.label,

package/src/components/Callout/index.ts

@@ -1 +1,2 @@
 export { default as Callout } from "./Callout";
+export { default as calloutArgs } from "./Callout.args";