@ilo-org/react 0.0.13 → 0.0.15

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @ilo-org/react
 
+## 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
+
+- 592c40ae9: Hover fix for data card and breadcrumb for hero
+- 3005bb74c: Fixes to Video, Accordion, List, Checkbox, favicon
+- b72b8aa9e: Update README; various bugfixes with Table, Footer, Notification, Video, RichText
+- d7015e194: - Tag fixes for consistent font size
+  - Accordion transition, font size and height fixes
+  - Tooltip transition fix
+  - Cards padding and anchor the date on feature cards
+  - List fix font sizes on mobile
+  - Callout fix transition timing
+- 6ba8ee615: Documentation for wingusit
+- Updated dependencies [fdba39df6]
+- Updated dependencies [592c40ae9]
+- Updated dependencies [3005bb74c]
+- Updated dependencies [b72b8aa9e]
+- Updated dependencies [d7015e194]
+- Updated dependencies [6ba8ee615]
+  - @ilo-org/styles@0.1.10
+  - @ilo-org/icons-react@0.0.12
+  - @ilo-org/themes@0.1.10
+  - @ilo-org/utils@0.0.6
+
 ## 0.0.13
 
 ### Patch Changes

package/README.md

@@ -1,11 +1,189 @@
 # ILO Design System - React Package
 
-## Status: Proof of Concept
+This package provides the implementation of the Design System using [React](https://reactjs.org). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of the components in the system. It has dependencies on the following other @ilo-org packages:
 
-This package provides the implementation of the Design System using [React](https://reactjs.org/). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of React components.
+- [@ilo-org/themes](./packages/themes)
+- [@ilo-org/fonts](./packages/fonts)
+- [@ilo-org/styles](./packages/styles)
+- [@ilo-org/utils](./packages/utils)
+- [@ilo-org/icons](./packages/icons)
+- [@ilo-org/icons-react](./packages/icons-react)
 
-This is just a POC, so the package doesn't expose components or include a build step. Only the Storybook project is implemented.
+## Installation and PNPM Commands
 
-## Styling
+To install
 
-Use the `styles` package to manage styling for React components
+```bash
+npm i @ilo-org/react
+```
+
+To start storybook
+
+```bash
+pnpm storybook
+```
+
+To build storybook
+
+```bash
+pnpm build:storybook
+```
+
+To test formatting
+
+```bash
+pnpm format
+```
+
+To test formatting and fix errors
+
+```bash
+pnpm format:fix
+```
+
+To lint
+
+```bash
+pnpm lint
+```
+
+To test formatting and fix errors
+
+```bash
+pnpm lint:fix
+```
+
+## Questions and Feedback
+
+(TBD)
+
+## Accessibility Standards
+
+(TBD)
+
+## Contributing
+
+ILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review the following guidelines.
+
+### Branches
+
+| Branch    | Purpose                            |
+| --------- | ---------------------------------- |
+| `main`    | The latest version of all packages |
+| `develop` | The next release of all packages   |
+
+### Contribution workflow
+
+1. Fork and clone the repo
+2. Create a new branch from the `develop` branch
+3. Make your changes and [add a changeset](#versioning) identifying the changes and affected packages
+4. Push your branch to the forked version of the repo
+5. Open a pull request back to the `develop` branch of the main repo
+
+### Versioning
+
+The project uses [changesets](https://github.com/changesets/changesets) to manage package versioning. All pull requests that will affect the project's semantic versioning must include a changest.
+
+See more information on [how to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
+
+### Conventions
+
+Contributions should respect the following conventions for branch names, commit messages and pull request descriptions
+
+#### Commits
+
+Commits should follow [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#commit).
+
+```
+<type>(<scope>): <subject>
+```
+
+Examples:
+
+```
+fix(react): change button color on hover
+feat(twig): add button component
+ci(github): add release workflow
+perf(react): improve modal animations
+```
+
+#### Types
+
+- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
+- ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
+- docs: Documentation only changes
+- feat: A new feature
+- fix: A bug fix
+- perf: A code change that improves performance
+- refactor: A code change that neither fixes a bug nor adds a feature
+- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+- test: Adding missing tests or correcting existing tests
+
+#### Scopes
+
+This should be a package name or an aspect of the project's configuration.
+
+### Branches
+
+Branch names should broadly mirror the same convention as commits.
+
+Examples:
+
+```
+feat/react/modal-wrapper
+fix/twig/modal-wrapper
+```
+
+### Pull requests
+
+Pull requests should include a descriptive name and detailed explanation of what merging the pull request will accomplish. Authors should make sure to reference Github issues that the the pull request will fix or affect.
+
+## Building the project
+
+Use [nvm](https://github.com/nvm-sh/nvm) to make sure you have the correct version of node installed.
+
+```bash
+nvm use
+```
+
+Install [pnpm](https://pnpm.io/).
+
+```bash
+npm i -g pnpm
+```
+
+Install dependencies
+
+```bash
+pnpm recursive install
+```
+
+Build all packages.
+
+```bash
+pnpm build:all
+```
+
+Start React storybook
+
+```bash
+pnpm start:react-storybook
+```
+
+Start Twig storybook
+
+```bash
+pnpm start:twig-storybook
+```
+
+Check types
+
+```bash
+pnpm check:types
+```
+
+Run all tests
+
+```bash
+pnpm test:all
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/react",
   "description": "React components for the ILO's Design System",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "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.11",
-    "@ilo-org/styles": "0.1.9",
-    "@ilo-org/themes": "0.1.9",
-    "@ilo-org/utils": "0.0.5",
+    "@ilo-org/fonts": "0.0.3",
+    "@ilo-org/icons-react": "0.0.13",
+    "@ilo-org/styles": "0.1.11",
+    "@ilo-org/themes": "0.1.11",
+    "@ilo-org/utils": "0.0.7",
     "classnames": "^2.3.1",
     "dom-helpers": "^5.2.1",
     "global": "^4.4.0",
@@ -111,5 +111,5 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "pnpm lint -- --fix"
   },
-  "readme": "# ILO Design System - React Package\n\n## Status: Proof of Concept\n\nThis package provides the implementation of the Design System using [React](https://reactjs.org/). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of React components.\n\nThis is just a POC, so the package doesn't expose components or include a build step. Only the Storybook project is implemented.\n\n## Styling\n\nUse the `styles` package to manage styling for React components\n"
+  "readme": "# ILO Design System - React Package\n\nThis package provides the implementation of the Design System using [React](https://reactjs.org). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of the components in the system. It has dependencies on the following other @ilo-org packages:\n\n- [@ilo-org/themes](./packages/themes)\n- [@ilo-org/fonts](./packages/fonts)\n- [@ilo-org/styles](./packages/styles)\n- [@ilo-org/utils](./packages/utils)\n- [@ilo-org/icons](./packages/icons)\n- [@ilo-org/icons-react](./packages/icons-react)\n\n## Installation and PNPM Commands\n\nTo install\n\n```bash\nnpm i @ilo-org/react\n```\n\nTo start storybook\n\n```bash\npnpm storybook\n```\n\nTo build storybook\n\n```bash\npnpm build:storybook\n```\n\nTo test formatting\n\n```bash\npnpm format\n```\n\nTo test formatting and fix errors\n\n```bash\npnpm format:fix\n```\n\nTo lint\n\n```bash\npnpm lint\n```\n\nTo test formatting and fix errors\n\n```bash\npnpm lint:fix\n```\n\n## Questions and Feedback\n\n(TBD)\n\n## Accessibility Standards\n\n(TBD)\n\n## Contributing\n\nILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review the following guidelines.\n\n### Branches\n\n| Branch    | Purpose                            |\n| --------- | ---------------------------------- |\n| `main`    | The latest version of all packages |\n| `develop` | The next release of all packages   |\n\n### Contribution workflow\n\n1. Fork and clone the repo\n2. Create a new branch from the `develop` branch\n3. Make your changes and [add a changeset](#versioning) identifying the changes and affected packages\n4. Push your branch to the forked version of the repo\n5. Open a pull request back to the `develop` branch of the main repo\n\n### Versioning\n\nThe project uses [changesets](https://github.com/changesets/changesets) to manage package versioning. All pull requests that will affect the project's semantic versioning must include a changest.\n\nSee more information on [how to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)\n\n### Conventions\n\nContributions should respect the following conventions for branch names, commit messages and pull request descriptions\n\n#### Commits\n\nCommits should follow [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#commit).\n\n```\n<type>(<scope>): <subject>\n```\n\nExamples:\n\n```\nfix(react): change button color on hover\nfeat(twig): add button component\nci(github): add release workflow\nperf(react): improve modal animations\n```\n\n#### Types\n\n- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\n- ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)\n- docs: Documentation only changes\n- feat: A new feature\n- fix: A bug fix\n- perf: A code change that improves performance\n- refactor: A code change that neither fixes a bug nor adds a feature\n- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\n- test: Adding missing tests or correcting existing tests\n\n#### Scopes\n\nThis should be a package name or an aspect of the project's configuration.\n\n### Branches\n\nBranch names should broadly mirror the same convention as commits.\n\nExamples:\n\n```\nfeat/react/modal-wrapper\nfix/twig/modal-wrapper\n```\n\n### Pull requests\n\nPull requests should include a descriptive name and detailed explanation of what merging the pull request will accomplish. Authors should make sure to reference Github issues that the the pull request will fix or affect.\n\n## Building the project\n\nUse [nvm](https://github.com/nvm-sh/nvm) to make sure you have the correct version of node installed.\n\n```bash\nnvm use\n```\n\nInstall [pnpm](https://pnpm.io/).\n\n```bash\nnpm i -g pnpm\n```\n\nInstall dependencies\n\n```bash\npnpm recursive install\n```\n\nBuild all packages.\n\n```bash\npnpm build:all\n```\n\nStart React storybook\n\n```bash\npnpm start:react-storybook\n```\n\nStart Twig storybook\n\n```bash\npnpm start:twig-storybook\n```\n\nCheck types\n\n```bash\npnpm check:types\n```\n\nRun all tests\n\n```bash\npnpm test:all\n```\n"
 }

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/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/src/components/Video/VideoPlayer.tsx

@@ -50,6 +50,11 @@ const VideoPlayer: FC<VideoPlayerProps> = ({
    */
   const videoElement = createRef();
 
+  /**
+   * Ref for the video container
+   */
+  const videoContainer = createRef();
+
   const youtubeparams = {
     controls: 0,
     modestbranding: 1,
@@ -68,7 +73,7 @@ const VideoPlayer: FC<VideoPlayerProps> = ({
   const toggleFullscreen = () => {
     /* This is a known issue with ReactPlayer */
     /* @ts-ignore */
-    screenfull.request(findDOMNode(videoElement.current));
+    screenfull.request(findDOMNode(videoContainer.current));
   };
 
   /**
@@ -162,7 +167,10 @@ const VideoPlayer: FC<VideoPlayerProps> = ({
   };
 
   return (
-    <div className={`${baseClass}--container`}>
+    <div
+      className={`${baseClass}--container`}
+      ref={videoContainer as React.RefObject<HTMLDivElement>}
+    >
       <ReactPlayer
         className={playerClasses}
         config={playerconfig as any}
@@ -173,6 +181,7 @@ const VideoPlayer: FC<VideoPlayerProps> = ({
         url={src as any}
         width="100%"
         height="100%"
+        progressInterval={30}
         volume={volume}
         onProgress={handleProgress}
         onDuration={handleDuration}