@ilo-org/react 0.0.14 → 0.0.16

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @ilo-org/react
 
+## 0.0.16
+
+### Patch Changes
+
+- 94bd642d9: ILOUAT-16: Clicking on the page should close subnav menu
+  ILOUAT-26: mobile hamburger click shouldn't auto navigate to inside link
+  ILOUAT-27: Menu take over on mobile should be the whole page without the ability to scroll past it
+  ILOUAT-37: Subnav pane should properly open when subnav items are focused
+- a167b7405: - Border radius for context menu
+  - Mobile nav disappear on breakpoint instead of any resize event
+  - More List spacing fixes (title item)
+  - Breadcrumb on mobile in heroes
+  - Bugfixes for feature card on wide mode with list item
+  - Add in "Back to main site" link for local nav
+- 79e17c5d3: Bufdixes to multiple components
+- 7b3813bb1: Bugfixes to multiple components
+- Updated dependencies [94bd642d9]
+- Updated dependencies [a167b7405]
+- Updated dependencies [79e17c5d3]
+- Updated dependencies [7b3813bb1]
+  - @ilo-org/fonts@0.0.4
+  - @ilo-org/icons-react@0.0.14
+  - @ilo-org/styles@0.1.12
+  - @ilo-org/themes@0.1.12
+  - @ilo-org/utils@0.0.8
+
+## 0.0.15
+
+### Patch Changes
+
+- f7f448c65: Fixes to React radio button, SearchField, add ability to serve different langauge fonts
+- f4b7bcb7f: Local nav fixes for mobile
+- 0dfb90274: Patchfix for Feature card wide version
+- Updated dependencies [f7f448c65]
+- Updated dependencies [f4b7bcb7f]
+- Updated dependencies [0dfb90274]
+  - @ilo-org/fonts@0.0.3
+  - @ilo-org/styles@0.1.11
+  - @ilo-org/themes@0.1.11
+  - @ilo-org/utils@0.0.7
+  - @ilo-org/icons-react@0.0.13
+
 ## 0.0.14
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/react",
   "description": "React components for the ILO's Design System",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "author": "@justintemps",
   "license": "Apache-2.0",
   "main": "lib/index.js",
@@ -24,11 +24,11 @@
   ],
   "dependencies": {
     "@ilo-org/brand-assets": "0.0.1",
-    "@ilo-org/fonts": "0.0.2",
-    "@ilo-org/icons-react": "0.0.12",
-    "@ilo-org/styles": "0.1.10",
-    "@ilo-org/themes": "0.1.10",
-    "@ilo-org/utils": "0.0.6",
+    "@ilo-org/fonts": "0.0.4",
+    "@ilo-org/icons-react": "0.0.14",
+    "@ilo-org/styles": "0.1.12",
+    "@ilo-org/themes": "0.1.12",
+    "@ilo-org/utils": "0.0.8",
     "classnames": "^2.3.1",
     "dom-helpers": "^5.2.1",
     "global": "^4.4.0",

package/src/components/ChoiceGroup/ChoiceGroup.args.ts

@@ -4,7 +4,7 @@ import RadioArgs from "../Radio/Radio.args";
 
 const checkboxfields = [];
 const radiofields = [];
-const radioid = `radio${Math.random() * (1000 - 1) + 1}`;
+const radioid = `radio${Math.floor(Math.random() * (1000 - 1) + 1)}`;
 
 for (let i = 0; i < 5; i++) {
   const checkboxargs = { ...CheckboxArgs.basic };
@@ -17,6 +17,7 @@ for (let i = 0; i < 5; i++) {
   radiofields.push(radioargs);
   radiofields[i].label = `Radio ${i}`;
   radiofields[i].name = radioid;
+  radiofields[i].id = `${radioid}${i}`;
   radiofields[i].type = "radio";
 }
 

package/src/components/ChoiceGroup/ChoiceGroup.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import { ChoiceGroupProps } from "./ChoiceGroup.props";
 import { Checkbox } from "../Checkbox";
 import { Fieldset } from "../Fieldset";
@@ -16,6 +16,12 @@ const ChoiceGroup: FC<ChoiceGroupProps> = ({
   // whatever type the first item has we expect from the other items
   const sanitzeditems = items.filter((item: any) => item !== items[0].type);
 
+  const [radio, setRadio] = useState(false);
+
+  const radioChangeHandler = (e: any) => {
+    setRadio(e.target.value);
+  };
+
   return (
     <Fieldset
       className={`ilo--choice-group ${className ? className : ""}`}
@@ -26,12 +32,18 @@ const ChoiceGroup: FC<ChoiceGroupProps> = ({
       grouptooltip={grouptooltip}
     >
       {sanitzeditems.map((item: any, i: any) => {
-        console.log(item);
         if (item?.type === "checkbox") {
           return <Checkbox {...(item as any)} key={i} />;
         }
         if (item?.type === "radio") {
-          return <Radio {...(item as any)} key={i} />;
+          return (
+            <Radio
+              {...(item as any)}
+              callback={radioChangeHandler}
+              selected={radio}
+              key={i}
+            />
+          );
         }
       })}
       ;

package/src/components/Fieldset/Fieldset.tsx

@@ -55,7 +55,7 @@ const Fieldset: FC<FieldsetProps> = ({
               {child.props.label && (
                 <label
                   className={`${baseClass}--label`}
-                  htmlFor={child.props.id}
+                  htmlFor={child.props.id ? child.props.id : child.props.name}
                 >
                   {child.props.label}
                   {child.props.tooltip && (

package/src/components/Hero/Hero.args.ts

@@ -245,9 +245,7 @@ const publicationHero: HeroProps = {
   className: "storybook",
   image: {
     alt: "Alt tag",
-    caption: "This is a caption",
     className: "storybook",
-    credit: "Credit Here",
     url: [
       {
         breakpoint: 0,

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

@@ -44,6 +44,11 @@ export interface RadioProps {
    */
   required?: boolean;
 
+  /**
+   * Which radio button has been selected?
+   */
+  selected?: string | boolean;
+
   /**
    * Does this Radio have a tooltip?
    */

package/src/components/Radio/Radio.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { RadioProps } from "./Radio.props";
@@ -13,6 +13,7 @@ const Radio: FC<RadioProps> = ({
   label,
   name,
   required,
+  selected,
   tooltip,
   value,
 }) => {
@@ -24,14 +25,10 @@ const Radio: FC<RadioProps> = ({
     [`error`]: error,
   });
 
-  const [checked, setChecked] = useState(false);
-
   /**
    * On change, if there is a callback, call it
    */
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(e.target.checked);
-
     if (callback) {
       callback(e);
     }
@@ -54,7 +51,7 @@ const Radio: FC<RadioProps> = ({
         required={required as any}
         type={"radio"}
         className={RadioClasses}
-        checked={checked}
+        checked={selected == value}
         value={value}
       />
     </FormElement>

package/src/components/SearchField/SearchField.tsx

@@ -22,14 +22,18 @@ const SearchField: FC<SearchFieldProps> = ({
   /**
    * On click, if there is a callback, call it
    */
-  const handleClick = (e: React.MouseEvent<Element, MouseEvent>) => {
+  const handleSubmit = (e: React.SyntheticEvent) => {
     if (callback) {
       callback(e);
     }
   };
 
   return (
-    <form className={SearchFieldClasses} action={action}>
+    <form
+      className={SearchFieldClasses}
+      action={action}
+      onSubmit={(e) => handleSubmit(e)}
+    >
       <Input
         id={input.id}
         name={input.name}
@@ -42,12 +46,7 @@ const SearchField: FC<SearchFieldProps> = ({
         type={input.type}
         className={`${prefix}--input`}
       />
-      <input
-        className={buttonClass}
-        disabled={input.disabled}
-        type="submit"
-        onClick={(e) => handleClick(e)}
-      />
+      <input className={buttonClass} disabled={input.disabled} type="submit" />
     </form>
   );
 };

package/storybook-static/iframe.html

@@ -338,7 +338,7 @@
         /* eslint-enable object-shorthand */
       })
     );
-  };</script><link href="static/css/main.d45ebb04.css" rel="stylesheet"><style>#root[hidden],
+  };</script><link href="static/css/main.3a816114.css" rel="stylesheet"><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
       }</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.3bae6a4f.iframe.bundle.js"></script><script src="212.faba6ad0.iframe.bundle.js"></script><script src="main.22c1d441.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.3bae6a4f.iframe.bundle.js"></script><script src="212.faba6ad0.iframe.bundle.js"></script><script src="main.09e49cbd.iframe.bundle.js"></script></body></html>