@ilo-org/react 0.0.12 → 0.0.14

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.12",
+  "version": "0.0.14",
   "author": "@justintemps",
   "license": "Apache-2.0",
   "main": "lib/index.js",
@@ -25,10 +25,10 @@
   "dependencies": {
     "@ilo-org/brand-assets": "0.0.1",
     "@ilo-org/fonts": "0.0.2",
-    "@ilo-org/icons-react": "0.0.10",
-    "@ilo-org/styles": "0.1.8",
-    "@ilo-org/themes": "0.1.8",
-    "@ilo-org/utils": "0.0.4",
+    "@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",
     "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/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}

package/src/stories/Introduction.stories.mdx

@@ -1,12 +1,258 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta, Canvas } from "@storybook/addon-docs/blocks";
+import { Badge } from "@storybook/components";
+import { getStorybook, storiesOf } from "@storybook/react";
+import LinkTo from "@storybook/addon-links/react";
 
 <Meta title="Introduction" />
 
-# ILO Design System
+<div style={{ paddingTop: "40px", color: "inherit" }}>
+  <h2
+    style={{
+      fontFamily: "Overpass",
+      fontSize: "56.95px",
+      fontWeight: "700",
+      marginBottom: "40px",
+      border: "none",
+    }}
+  >
+    ILO Design System
+  </h2>
+  <h3
+    style={{
+      fontFamily: "Overpass",
+      fontSize: "45.56px",
+      fontWeight: "700",
+      marginBottom: "40px",
+    }}
+  >
+    Getting Started
+  </h3>
+</div>
 
-<br />
+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:
 
-### Current Project Status: _Proof of Concept_
+- [@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)
 
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/stories` directory to learn how they work.
+<h4
+  style={{
+    fontFamily: "Overpass",
+    fontSize: "29px",
+    fontWeight: "700",
+    marginBottom: "40px",
+    marginTop: "40px",
+  }}
+>
+  Installation and PNPM Commands
+</h4>
+
+To install
+
+```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
+```
+
+<h4
+  style={{
+    fontFamily: "Overpass",
+    fontSize: "29px",
+    fontWeight: "700",
+    marginBottom: "40px",
+    marginTop: "40px",
+  }}
+>
+  Questions and Feedback
+</h4>
+
+(TBD)
+
+<h4
+  style={{
+    fontFamily: "Overpass",
+    fontSize: "29px",
+    fontWeight: "700",
+    marginBottom: "40px",
+    marginTop: "40px",
+  }}
+>
+  Accessibility Standards
+</h4>
+
+(TBD)
+
+<h4
+  style={{
+    fontFamily: "Overpass",
+    fontSize: "29px",
+    fontWeight: "700",
+    marginBottom: "40px",
+    marginTop: "40px",
+  }}
+>
+  Contributing
+</h4>
+
+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/src/stories/Welcome.stories.mdx

@@ -0,0 +1,63 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Welcome" />
+
+<div style={{ paddingTop: "40px", color: "inherit" }}>
+  <h2
+    style={{
+      fontFamily: "Overpass",
+      fontSize: "56.95px",
+      fontWeight: "700",
+      marginBottom: "40px",
+      border: "none",
+    }}
+  >
+    ILO Design System
+  </h2>
+  <h3
+    style={{
+      fontFamily: "Overpass",
+      fontSize: "45.56px",
+      fontWeight: "700",
+      marginBottom: "40px",
+    }}
+  >
+    React Component Library 0.0.12
+  </h3>
+  <a
+    class="ilo--button ilo--button--large ilo--button--primary optionalclass"
+    href="/docs/introduction--page"
+    target="true"
+    rel="noopener noreferrer"
+    style={{ color: "inherit", marginRight: "20px" }}
+  >
+    <span class="link__label">Get started</span>
+  </a>
+  <a
+    class="ilo--button ilo--button--large ilo--button--primary optionalclass"
+    href="https://github.com/international-labour-organization/designsystem"
+    target="true"
+    rel="noopener noreferrer"
+    style={{ color: "inherit", marginRight: "20px" }}
+  >
+    <span class="link__label">Follow on Github</span>
+  </a>
+  <a
+    class="ilo--button ilo--button--large ilo--button--primary optionalclass"
+    href="https://brand.ilo.org"
+    target="true"
+    rel="noopener noreferrer"
+    style={{ color: "inherit", marginRight: "20px" }}
+  >
+    <span class="link__label">See Design Docs</span>
+  </a>
+  <a
+    class="ilo--button ilo--button--large ilo--button--primary optionalclass"
+    href="https://ilo-ui-twig.netlify.app"
+    target="true"
+    rel="noopener noreferrer"
+    style={{ color: "inherit", marginRight: "20px" }}
+  >
+    <span class="link__label">ILO Design System for Twig</span>
+  </a>
+</div>