@ilo-org/react 0.0.18 → 0.1.0

package/src/stories/Introduction.stories.mdx

@@ -1,258 +0,0 @@
-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" />
-
-<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>
-
-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:
-
-- [@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)
-
-<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/Link.stories.tsx

@@ -1,104 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  Subheading,
-} from "@storybook/addon-docs";
-import { Link } from "../components/Link";
-import { LinkProps } from "../components/Link/Link.props";
-import linkArgs from "../components/Link/Link.args";
-
-const themeDoc = `
-By changing the \`theme\` prop you can change base coloring of the links. By default this is set to \`light\`.
-
-| Theme   |  Description  |
-|----------|-------------|
-| \`light\` | Link theme for a light background color. |
-| \`dark\` | Link theme for a dark background color. |
-| \`footer\` | Link theme for a dark background color. |
-`;
-
-/**
- * Link Story
- *
- */
-export default {
-  title: "Components/Link",
-  component: Link,
-  argTypes: {
-    theme: {
-      options: ["light", "dark", "footer"],
-      control: { type: "select" },
-    },
-  },
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The link component creates an anchor link with a specific theme.
-          </Description>
-          <Primary />
-          <ArgsTable />
-          <Subheading>Theme Prop</Subheading>
-          <Description>{themeDoc}</Description>
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof Link>;
-
-/**
- * Link Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const LinkTemplate: Story<LinkProps> = (args) => (
-  <Link {...args}>This is text for the link</Link>
-);
-
-/**
- * Light Link Instance
- *
- */
-export const BaseLink = LinkTemplate.bind({});
-
-/**
- * Dark Link Instance
- *
- */
-export const DarkLink = LinkTemplate.bind({});
-
-/**
- * Footer Link Instance
- *
- */
-export const FooterLink = LinkTemplate.bind({});
-
-// enumerate the props for the light link.
-BaseLink.args = linkArgs.light;
-BaseLink.args.url = "https://www.google.com/";
-BaseLink.storyName = "Light Link";
-
-// enumerate the props dark link
-DarkLink.args = linkArgs.dark;
-DarkLink.parameters = {
-  backgrounds: { default: "dark" },
-};
-DarkLink.args.url = "https://www.wikipedia.org/";
-DarkLink.storyName = "Dark Link";
-
-// enumerate the props dark link
-FooterLink.args = linkArgs.footer;
-FooterLink.args.url = "https://www.weather.com/";
-FooterLink.storyName = "Footer Link";

package/src/stories/LinkList.stories.tsx

@@ -1,74 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  Stories,
-} from "@storybook/addon-docs";
-import { LinkList } from "../components/LinkList";
-import { LinkListProps } from "../components/LinkList/LinkList.props";
-import profileArgs from "../components/LinkList/LinkList.args";
-
-/**
- * LinkList Story
- *
- */
-export default {
-  title: "Components/LinkList",
-  component: LinkList,
-  argTypes: {
-    theme: {
-      options: ["light", "dark"],
-      control: { type: "select" },
-    },
-  },
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The Link List component is used to display a meaingfully-grouped set
-            of links.
-          </Description>
-          <Primary />
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof LinkList>;
-
-/**
- * LinkList Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const LinkListTemplate: Story<LinkListProps> = (args) => <LinkList {...args} />;
-
-export const Basic = LinkListTemplate.bind({});
-
-export const WithIndented = LinkListTemplate.bind({});
-
-export const WithSections = LinkListTemplate.bind({});
-
-export const WithSectionsIndented = LinkListTemplate.bind({});
-
-// enumerate the props for the variations on the LinkList component
-Basic.args = profileArgs.basic;
-Basic.storyName = "LinkList - Basic";
-
-WithIndented.args = profileArgs.withindented;
-WithIndented.storyName = "LinkList - With Some Indented Items";
-
-WithSections.args = profileArgs.withsections;
-WithSections.storyName = "LinkList - With Sections";
-
-WithSectionsIndented.args = profileArgs.withsectionsindented;
-WithSectionsIndented.storyName =
-  "LinkList - With Sections and Some Indented Items";

package/src/stories/List.stories.tsx

@@ -1,255 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  Subheading,
-} from "@storybook/addon-docs";
-import { List, ListItem } from "../components/List";
-import { ListProps } from "../components/List/List.props";
-import listArgs from "../components/List/List.args";
-
-const sizeDoc = `
-By changing the \`ordered\` prop you can use switch from a \`<ol>\` to a \`<ul>\`
-
-| ordered   |  Description  |
-|----------|-------------|
-| \`ordered\` | make a \`<ol>\` |
-| \`unordered\` | make a \`<ul>\`   |
-| \`unstyled\` | make a \`<ul>\` without markers  |
-`;
-
-/**
- * List Story
- *
- */
-export default {
-  title: "Components/List",
-  component: List,
-  argTypes: {
-    alignment: {
-      options: ["horizontal", "default"],
-      control: { type: "select" },
-    },
-    ordered: {
-      options: ["ordered", "unordered", "unstyled"],
-      control: { type: "select" },
-    },
-  },
-  subcomponents: {
-    ListItem,
-  },
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The list component allows the user to show and hide sections of
-            related content on a page. Click the lists below to expand/collapse
-            the list content.
-          </Description>
-          <Primary />
-          <ArgsTable />
-          <Subheading>Size Prop</Subheading>
-          <Description>{sizeDoc}</Description>
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof List>;
-
-/**
- * Ordered Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const OrderedTemplate: Story<ListProps> = () => (
-  <List {...listArgs.ordered}>
-    <ListItem id="ordered1">
-      <p>Arabica. Arabica is the most popular type of coffee, hands down.</p>
-    </ListItem>
-    <ListItem id="ordered2">
-      <p>
-        Robusta. While Arabica is the most popular, Robusta is cheaper and
-        stronger.
-      </p>
-    </ListItem>
-    <ListItem id="ordered3">
-      <p>
-        Black coffee is as simple as it gets with ground coffee beans steeped in
-        hot water, served warm.
-      </p>
-    </ListItem>
-    <ListItem id="ordered4">
-      <p>
-        Latte. Made with espresso and hot steamed milk, milkier than a
-        cappuccino.
-      </p>
-    </ListItem>
-    <ListItem id="ordered5">
-      <p>
-        Cappuccino. Made with espresso and milk that has been frothed up with
-        pressurized steam.
-      </p>
-    </ListItem>
-  </List>
-);
-
-/**
- * Unordered Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const UnorderedTemplate: Story<ListProps> = () => (
-  <List {...listArgs.unordered}>
-    <ListItem id="unordered1">
-      <p>Arabica. Arabica is the most popular type of coffee, hands down.</p>
-    </ListItem>
-    <ListItem id="unordered2">
-      <p>
-        Robusta. While Arabica is the most popular, Robusta is cheaper and
-        stronger.
-      </p>
-    </ListItem>
-    <ListItem id="unordered3">
-      <p>
-        Black coffee is as simple as it gets with ground coffee beans steeped in
-        hot water, served warm.
-      </p>
-    </ListItem>
-    <ListItem id="unordered4">
-      <p>
-        Latte. Made with espresso and hot steamed milk, milkier than a
-        cappuccino.
-      </p>
-    </ListItem>
-    <ListItem id="unordered5">
-      <p>
-        Cappuccino. Made with espresso and milk that has been frothed up with
-        pressurized steam.
-      </p>
-    </ListItem>
-  </List>
-);
-
-/**
- * Unstyled Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const UnstyledTemplate: Story<ListProps> = () => (
-  <List {...listArgs.unstyled}>
-    <ListItem id="unstyled1">
-      <p>Arabica. Arabica is the most popular type of coffee, hands down.</p>
-    </ListItem>
-    <ListItem id="unstyled1">
-      <p>
-        <b>With milk added.</b>
-      </p>
-    </ListItem>
-    <ListItem id="unstyled2">
-      <p>
-        Robusta. While Arabica is the most popular, Robusta is cheaper and
-        stronger.
-      </p>
-    </ListItem>
-    <ListItem id="unstyled3">
-      <p>
-        Black coffee is as simple as it gets with ground coffee beans steeped in
-        hot water, served warm.
-      </p>
-    </ListItem>
-    <ListItem id="unstyled4">
-      <p>
-        Latte. Made with espresso and hot steamed milk, milkier than a
-        cappuccino.
-      </p>
-    </ListItem>
-    <ListItem id="unstyled5">
-      <p>
-        Cappuccino. Made with espresso and milk that has been frothed up with
-        pressurized steam.
-      </p>
-    </ListItem>
-  </List>
-);
-
-/**
- * Horizontal Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const HorizontalTemplate: Story<ListProps> = () => (
-  <List {...listArgs.horizontal}>
-    <ListItem id="horizontal1">
-      <p>Arabica</p>
-    </ListItem>
-    <ListItem id="horizontal2">
-      <p>Robusta</p>
-    </ListItem>
-    <ListItem id="horizontal3">
-      <p>Black coffee</p>
-    </ListItem>
-    <ListItem id="horizontal4">
-      <p>Latte</p>
-    </ListItem>
-    <ListItem id="horizontal5">
-      <p>Cappuccino</p>
-    </ListItem>
-  </List>
-);
-
-/**
- * Ordered List Instance
- *
- */
-export const ListOrdered = OrderedTemplate.bind({});
-
-/**
- * Unordered List Instance
- *
- */
-export const ListUnordered = UnorderedTemplate.bind({});
-
-/**
- * Unstyled List Instance
- *
- */
-export const ListUnstyled = UnstyledTemplate.bind({});
-
-/**
- * Horizontal List Instance
- *
- */
-export const ListHorizontal = HorizontalTemplate.bind({});
-
-// enumerate the props for the ordered list.
-ListOrdered.args = listArgs.ordered;
-ListOrdered.storyName = "Ordered List";
-
-// enumerate the props
-ListUnordered.args = listArgs.unordered;
-ListUnordered.storyName = "Unordered List";
-
-// enumerate the props
-ListUnstyled.args = listArgs.unstyled;
-ListUnstyled.storyName = "Unstyled List";
-
-// enumerate the props
-ListHorizontal.args = listArgs.horizontal;
-ListHorizontal.storyName = "Horizontal List";