@ilo-org/react 0.0.18 → 0.1.0

package/src/components/Input/Input.args.ts

@@ -1,7 +1,7 @@
 import { InputProps } from "./Input.props";
 
 const basic: InputProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: false,
   helper: false,
@@ -13,7 +13,7 @@ const basic: InputProps = {
 };
 
 const isdisabled: InputProps = {
-  callback: "",
+  callback: () => {},
   disabled: true,
   error: false,
   helper: "This one has helper text",
@@ -25,7 +25,7 @@ const isdisabled: InputProps = {
 };
 
 const hashelper: InputProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: false,
   helper: "This one has helper text",
@@ -37,7 +37,7 @@ const hashelper: InputProps = {
 };
 
 const haserror: InputProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: "This one has an error",
   helper: false,
@@ -49,7 +49,7 @@ const haserror: InputProps = {
 };
 
 const hastooltip: InputProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: false,
   helper: false,
@@ -62,7 +62,7 @@ const hastooltip: InputProps = {
 };
 
 const email: InputProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: false,
   helper: false,
@@ -74,7 +74,7 @@ const email: InputProps = {
 };
 
 const hidden: InputProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: false,
   helper: false,
@@ -85,7 +85,7 @@ const hidden: InputProps = {
 };
 
 const password: InputProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: false,
   helper: false,
@@ -97,7 +97,7 @@ const password: InputProps = {
 };
 
 const tel: InputProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: false,
   helper: false,
@@ -109,7 +109,7 @@ const tel: InputProps = {
 };
 
 const url: InputProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: false,
   helper: false,

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

@@ -1,10 +1,10 @@
-import { inputTypes } from "../../types";
+import { InputTypes } from "../../types";
 
 export interface InputProps {
   /**
    * The input's onChange callback.
    */
-  callback?: function;
+  callback?: (e: React.ChangeEvent<HTMLInputElement>) => any;
 
   /**
    * Specify an optional className to be added to your input.
@@ -59,5 +59,5 @@ export interface InputProps {
   /**
    * The input's type.
    */
-  type: Required<inputTypes>;
+  type: InputTypes;
 }

package/src/components/Input/Input.tsx

@@ -36,7 +36,7 @@ const Input: FC<InputProps> = ({
   };
 
   return (
-    <Fieldset legend={false} fieldsetid={false}>
+    <Fieldset>
       <FormElement
         elemid={name as any}
         label={label as any}

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

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { linkTypes } from "../../types";
+import { LinkTypes } from "../../types";
 
 export interface LinkProps {
   /**
@@ -10,7 +10,7 @@ export interface LinkProps {
   /**
    * Specify the label for the link
    */
-  label?: html;
+  label?: string;
 
   /**
    * Specify the url for the link's href
@@ -25,10 +25,15 @@ export interface LinkProps {
   /**
    * Specify an optional className to be added to your Link.
    */
-  theme?: linkTypes;
+  theme?: LinkTypes;
 
   /**
    * Specify an optional className to be added to your Link.
    */
   className?: string;
+
+  /**
+   * Inline styles to be applied to the rendered element
+   */
+  style?: React.CSSProperties;
 }

package/src/components/Link/Link.tsx

@@ -10,6 +10,7 @@ const Link: FC<LinkProps> = ({
   target,
   theme = "light",
   url,
+  style,
   ...rest
 }) => {
   const { prefix } = useGlobalSettings();
@@ -23,24 +24,16 @@ const Link: FC<LinkProps> = ({
     [`${baseClass}--${theme}`]: theme,
   });
 
-  function createMarkup() {
-    return { __html: label };
-  }
-
   return (
     <a
       className={linkClasses}
       href={url}
       target={target}
       rel={target ? "noopener noreferrer" : ""}
+      style={style}
       {...rest}
     >
-      {label && (
-        <span
-          className="link__label"
-          dangerouslySetInnerHTML={createMarkup()}
-        ></span>
-      )}
+      {label && <span className="link__label">{label}</span>}
       {children}
     </a>
   );

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

@@ -1,4 +1,4 @@
-import { linkListThemes } from "../../types";
+import { LinkListThemes } from "../../types";
 
 interface LinkProps {
   /**
@@ -48,5 +48,5 @@ export interface LinkListProps {
   /**
    * Specify the theme for the Link List
    */
-  theme?: Required<linkListThemes>;
+  theme?: Required<LinkListThemes>;
 }

package/src/components/List/List.args.ts

@@ -1,25 +1,21 @@
 import { ListProps } from "./List.props";
 
 const unordered: ListProps = {
-  children: "",
   ordered: "unordered",
   title: "Unordered List Title",
 };
 
 const unstyled: ListProps = {
-  children: "",
   ordered: "unstyled",
   title: "Unstyled List Title",
 };
 
 const ordered: ListProps = {
-  children: "",
   ordered: "ordered",
   title: "Ordered List Title",
 };
 
 const horizontal: ListProps = {
-  children: "",
   alignment: "horizontal",
   ordered: "unordered",
   title: "Horizontal List Title",

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

@@ -1,21 +1,22 @@
-export { default as ListItem } from "./ListItem";
-import { listAlignment, listOrder } from "../../types";
+import { ReactElement } from "react";
+import { HeadingLevel, ListAlignment, ListOrder } from "../../types";
+import { ListItemProps } from "./ListItem.props";
 
 export interface ListProps {
   /**
    * Specify the content of your List.
    */
-  children: ReactElement<ListItem> | Array<ReactElement<ListItem>>;
+  children?: ReactElement<ListItemProps> | ReactElement<ListItemProps>[];
 
   /**
    * Declare ordered, unordered or unstyled
    */
-  ordered?: listOrder;
+  ordered?: ListOrder;
 
   /**
    * Declare horizontal or default
    */
-  alignment?: listAlignment;
+  alignment?: ListAlignment;
 
   /**
    * Specify an optional title
@@ -30,7 +31,7 @@ export interface ListProps {
 
 export interface ListContextProps {
   activeItems: string[];
-  alignment?: listAlignment;
-  ordered?: listOrder;
-  headingLevel?: headingLevel;
+  alignment?: ListAlignment;
+  ordered?: ListOrder;
+  headingLevel?: HeadingLevel;
 }

package/src/components/List/List.tsx

@@ -1,9 +1,8 @@
-import { useState, createContext, FC } from "react";
 import classNames from "classnames";
+import { FC, useState } from "react";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { ListProps, ListContextProps } from "./List.props";
-
-export const ListContext = createContext({} as ListContextProps);
+import { ListProps } from "./List.props";
+import { ListContext } from "./ListCtx";
 
 const List: FC<ListProps> = ({
   children,

package/src/components/List/ListCtx.ts

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import { ListContextProps } from "./List.props";
+import { ListItemContextProps } from "./ListItem.props";
+
+export const ListContext = createContext({} as ListContextProps);
+
+export const ListItemContext = createContext({} as ListItemContextProps);

package/src/components/List/ListItem.tsx

@@ -1,9 +1,8 @@
-import { FC, createContext } from "react";
 import classNames from "classnames";
+import { FC } from "react";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { ListItemProps, ListItemContextProps } from "./ListItem.props";
-
-export const ListItemContext = createContext({} as ListItemContextProps);
+import { ListItemContext } from "./ListCtx";
+import { ListItemProps } from "./ListItem.props";
 
 const ListItem: FC<ListItemProps> = ({ children, id, className, ...rest }) => {
   const { prefix } = useGlobalSettings();

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

@@ -1,4 +1,4 @@
-import { loadingStatus, loadingSize } from "../../types";
+import { LoadingStatus, LoadingSize } from "../../types";
 
 export interface LoadingProps {
   /**
@@ -14,10 +14,10 @@ export interface LoadingProps {
   /**
    * Specify the loader's size
    */
-  size?: Required<loadingSize>;
+  size?: Required<LoadingSize>;
 
   /**
    * Specify the loading status
    */
-  status?: Required<loadingStatus>;
+  status?: Required<LoadingStatus>;
 }

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

@@ -1,4 +1,4 @@
-import { notificationPlacement, notificationTypes } from "../../types";
+import { NotificationPlacement, NotificationTypes } from "../../types";
 
 interface CTAProps {
   /**
@@ -53,7 +53,7 @@ export interface NotificationProps {
   /**
    * Specify whether the notification is inline in the DOM or absolutely-positioned at a higher z-index
    */
-  placement?: Required<notificationPlacement>;
+  placement?: Required<NotificationPlacement>;
 
   /**
    * Specify an optional timestamp
@@ -63,5 +63,5 @@ export interface NotificationProps {
   /**
    * Specify the icon for the Notification
    */
-  type?: notificationTypes;
+  type?: NotificationTypes;
 }

package/src/components/Notification/Notification.tsx

@@ -27,7 +27,7 @@ const Notification: FC<NotificationProps> = ({
   });
 
   const ctaprops: ButtonProps = {
-    callback: false,
+    callback: () => {},
     className: `${baseClass}--cta`,
     children: false,
     label: cta?.label,

package/src/components/NumberPicker/NumberPicker.args.ts

@@ -1,7 +1,7 @@
 import { NumberPickerProps } from "./NumberPicker.props";
 
 const basic: NumberPickerProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: false,
   helper: false,
@@ -12,7 +12,7 @@ const basic: NumberPickerProps = {
 };
 
 const hashelper: NumberPickerProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: false,
   helper: "Here is the helper text",
@@ -23,7 +23,7 @@ const hashelper: NumberPickerProps = {
 };
 
 const haserror: NumberPickerProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: "This one has an error",
   helper: false,
@@ -34,7 +34,7 @@ const haserror: NumberPickerProps = {
 };
 
 const hastooltip: NumberPickerProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
   error: false,
   helper: false,

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

@@ -2,7 +2,7 @@ export interface NumberPickerProps {
   /**
    * The input's onChange callback.
    */
-  callback: function;
+  callback: (e: React.ChangeEvent<HTMLInputElement>) => any;
 
   /**
    * Specify an optional className to be added to your input.

package/src/components/NumberPicker/NumberPicker.tsx

@@ -35,7 +35,7 @@ const NumberPicker: FC<NumberPickerProps> = ({
   };
 
   return (
-    <Fieldset legend={false} fieldsetid={false}>
+    <Fieldset>
       <FormElement
         elemid={name as any}
         label={label}

package/src/components/Pagination/Pagination.args.ts

@@ -2,7 +2,7 @@ import { PaginationProps } from "./Pagination.props";
 
 const pagination: PaginationProps = {
   className: "storybook",
-  callback: "",
+  callback: () => {},
   currentPage: 1,
   firstPageUrl: "https://www.google.com?s=first",
   firstPageTitle: "First",
@@ -18,7 +18,7 @@ const pagination: PaginationProps = {
 
 const firstDisabled: PaginationProps = {
   className: "storybook",
-  callback: "",
+  callback: () => {},
   currentPage: 0,
   firstPageUrl: "https://www.google.com?s=first",
   firstPageTitle: "First",

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

@@ -2,7 +2,7 @@ export interface PaginationProps {
   /**
    * Specify the callback of your Button.
    */
-  callback: function;
+  callback: (e: React.MouseEvent<Element, MouseEvent>) => any;
 
   /**
    * Specify an optional className to be added to your Pagination component.

package/src/components/Profile/Profile.args.ts

@@ -1,47 +1,47 @@
 import { ProfileProps } from "./Profile.props";
 
 const basic: ProfileProps = {
-  avatar: "http://placekitten.com/128/128",
+  avatar: "/ilo-dg.jpg",
   className: "storybook",
-  name: "Firstname Lastname",
+  name: "Gilbert F. Houngbo",
 };
 
 const hasall: ProfileProps = {
-  avatar: "http://placekitten.com/128/128",
+  avatar: "/ilo-dg.jpg",
   className: "storybook",
   description:
-    "Firstname Lastname is the Senior Media Strategist. He has been with ILO for eight years.",
+    "Gilbert F. Houngbo was elected as the ILO’s 11th Director-General by the organization’s Governing Body in March 2022",
   link: {
-    label: "Optional Link",
+    label: "Learn more",
     url: "http://www.google.com",
   },
-  name: "Firstname Lastname",
-  role: "Senior Media Strategist",
+  name: "Gilbert F. Houngbo",
+  role: "ILO Director-General",
 };
 
 const hasdescription: ProfileProps = {
-  avatar: "http://placekitten.com/128/128",
+  avatar: "/ilo-dg.jpg",
   className: "storybook",
   description:
-    "Firstname Lastname is the Senior Media Strategist. He has been with ILO for eight years.",
-  name: "Firstname Lastname",
+    "Gilbert F. Houngbo was elected as the ILO’s 11th Director-General by the organization’s Governing Body in March 2022",
+  name: "Gilbert F. Houngbo",
 };
 
 const haslink: ProfileProps = {
-  avatar: "http://placekitten.com/128/128",
+  avatar: "/ilo-dg.jpg",
   className: "storybook",
   link: {
-    label: "Optional Link",
+    label: "Learn more",
     url: "http://www.google.com",
   },
-  name: "Firstname Lastname",
+  name: "Gilbert F. Houngbo",
 };
 
 const hasrole: ProfileProps = {
-  avatar: "http://placekitten.com/128/128",
+  avatar: "/ilo-dg.jpg",
   className: "storybook",
-  name: "Firstname Lastname",
-  role: "Senior Media Strategist",
+  name: "Gilbert F. Houngbo",
+  role: "ILO Director-General",
 };
 
 /**

package/src/components/Radio/Radio.args.ts

@@ -1,14 +1,13 @@
 import { RadioProps } from "./Radio.props";
 
 const basic: RadioProps = {
-  callback: "",
+  callback: () => {},
   disabled: false,
-  error: false,
-  helper: false,
+  error: "",
+  helper: "",
   label: "Radio Field Label",
   name: "radio",
   required: false,
-  type: "radio",
   value: "radio",
 };
 

package/src/components/Radio/Radio.props.ts

@@ -0,0 +1,14 @@
+export interface RadioProps {
+  callback?: (e: React.ChangeEvent<HTMLInputElement>) => any;
+  className?: string;
+  disabled?: boolean;
+  error?: string;
+  helper?: string;
+  id?: string;
+  label?: string;
+  name: string;
+  required?: boolean;
+  tooltip?: string;
+  value: string;
+  selected?: string;
+}

package/src/components/Radio/Radio.tsx

@@ -51,7 +51,7 @@ const Radio: FC<RadioProps> = ({
         required={required as any}
         type={"radio"}
         className={RadioClasses}
-        checked={selected == value}
+        checked={selected === value}
         value={value}
       />
     </FormElement>

package/src/components/ReadMore/ReadMore.args.ts

@@ -0,0 +1,23 @@
+import { ReadMoreProps } from "./ReadMore.props";
+
+const fulltext = `<p>Underlying the ILO’s work is the importance of cooperation between governments and employers’ and workers’ organizations in fostering social and economic progress. The ILO aims to ensure that it serves the needs of working women and men by bringing together governments, employers and workers to set labour standards, develop policies and devise programmes.</p>
+
+<p>The very structure of the ILO, where workers and employers together have an equal voice with governments in its deliberations, shows social dialogue in action. It ensures that the views of the social partners are closely reflected in ILO labour standards, policies and programmes.</p>
+
+<p>The ILO encourages this tripartism within its constituents - employers , workers  and member States , by promoting a social dialogue between trade unions and employers in formulating, and where appropriate, implementing national policy on social, economic, and many other issues.</p>`;
+
+const excerpt = fulltext.split("\n\n")[0];
+
+const base: ReadMoreProps = {
+  buttonlabel: {
+    closed: "Read More",
+    opened: "Close",
+  },
+  excerpt,
+  fulltext,
+  openatstart: false,
+};
+
+const open = { ...base, openatstart: true };
+
+export default { base, open };

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

@@ -24,12 +24,12 @@ export interface ReadMoreProps {
   /**
    * Specify the excerpt text
    */
-  excerpt?: html;
+  excerpt: string;
 
   /**
    * Specify the complete text
    */
-  fulltext?: html;
+  fulltext: string;
 
   /**
    * Specify the open/closed state on component load

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

@@ -7,5 +7,5 @@ export interface RichTextProps {
   /**
    * Specify the html content
    */
-  content?: html;
+  content: string;
 }

package/src/components/RichText/richText.args.ts

@@ -1,8 +1,31 @@
 import { RichTextProps } from "./RichText.props";
 
 const richtext: RichTextProps = {
-  content:
-    "<h1>Apollo 11</h1><p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href='http://en.wikipedia.org/wiki/Neil_Armstrong'>Neil Armstrong</a> and <a href='http://en.wikipedia.org/wiki/Buzz_Aldrin'>Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p><p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href='http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)'>Michael Collins</a>, piloted the <a href='http://en.wikipedia.org/wiki/Apollo_Command/Service_Module'>command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth. <figure><img alt='placeholder image' class='right' src='https://place-hold.it/400x300?text=Placeholder Image'><figcaption>The caption for this image</figcaption></figure></p><h2>Broadcasting and <em>quotes</em> <a id='quotes' name='quotes'></a></h2><p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p><blockquote><p>One small step for [a] man, one giant leap for mankind</p><cite>Neil Armstrong</cite></blockquote><h2>Technical details <a id='tech-details' name='tech-details'></a></h2><p>Launched by a <strong>Saturn V</strong> rocket from <a href='http://en.wikipedia.org/wiki/Kennedy_Space_Center'>Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href='http://en.wikipedia.org/wiki/NASA'>NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p><ol><li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li><li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li><li><strong>Lunar Module</strong> for landing on the Moon.</li></ol><p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href='http://en.wikipedia.org/wiki/Mare_Tranquillitatis'>Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href='http://en.wikipedia.org/wiki/Pacific_Ocean'>Pacific Ocean</a> on July 24.</p><hr><p><small>Source: <a href='http://en.wikipedia.org/wiki/Apollo_11'>Wikipedia.org</a></small></p><h2>H2 Headline</h2><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p><h3>H3 Headline</h3><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p><h4>H4 Headline</h4><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p><h5>H5 Headline</h5><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p><h6>H6 Headline</h6><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>",
+  content: `<h2>International Labour Organization</h2>
+
+    <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p>
+
+    <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p>
+
+    <figure><img alt='placeholder image' class='right' src='/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure>
+
+    <h3>ILO Constitution</h3>
+
+    <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p>
+
+    <blockquote>
+      <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p>
+      <cite>ILO Director-General Gilbert F. Houngbo</cite>
+    </blockquote>
+
+    Reflecting these ideas, the Preamble of the ILO Constitution states:</p>
+
+    <ol>
+      <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li>
+      <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li>
+      <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li>
+    </ol>
+    `,
 };
 
 /**