@ilo-org/react 0.0.1

package/src/stories/Button.stories.tsx

@@ -0,0 +1,491 @@
+import { Story, Meta } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  Subheading,
+} from "@storybook/addon-docs";
+import { Button } from "../components/Button";
+import { ButtonProps } from "../components/Button/Button.props";
+import buttonArgs from "../components/Button/Button.args";
+
+const themeDoc = `
+By changing the \`size\` prop you can change the size of the button. By default this is set to \`large\`.
+
+| Size   |  Description  |
+|----------|-------------|
+| \`large\` | Button theme for a large button. |
+| \`medium\` | Button theme for a medium button. |
+| \`small\` | Button theme for a small button. |
+`;
+
+const typeDoc = `
+By changing the \`type\` prop you can change the type of the button, which affects the design of its default state. By default this is set to \`primary\`.
+
+| Type   |  Description  |
+|----------|-------------|
+| \`primary\` | Button type for a primary button. |
+| \`secondary\` | Button type for a secondary button. |
+| \`tertiary\` | Button type for a tertiary button. |
+| \`alert\` | Button type for an alert button. |
+`;
+
+/**
+ * Button Story
+ *
+ */
+export default {
+  title: "Components/Button",
+  component: Button,
+  argTypes: {},
+  parameters: {
+    componentSubtitle: "Component",
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The button component creates either an HTML button, or an anchor
+            link styled like a button.
+          </Description>
+          <Primary />
+          <ArgsTable />
+          <Subheading>Theme Prop</Subheading>
+          <Description>{themeDoc}</Description>
+          <Subheading>Type Prop</Subheading>
+          <Description>{typeDoc}</Description>
+          <Stories title="Examples"></Stories>
+        </>
+      ),
+    },
+  },
+} as Meta<typeof Button>;
+
+/**
+ * Button Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const ButtonTemplate: Story<ButtonProps> = (args) => <Button {...args} />;
+
+/**
+ * Large Button Instance
+ *
+ */
+export const BaseButton = ButtonTemplate.bind({});
+
+/**
+ * Medium Button Instance
+ *
+ */
+export const MediumButton = ButtonTemplate.bind({});
+
+/**
+ * Small Button Instance
+ *
+ */
+export const SmallButton = ButtonTemplate.bind({});
+
+/**
+ * Primary Button Instance
+ *
+ */
+export const PrimaryButton = ButtonTemplate.bind({});
+
+/**
+ * Secondary Button Instance
+ *
+ */
+export const SecondaryButton = ButtonTemplate.bind({});
+
+/**
+ * Tertiary Button Instance
+ *
+ */
+export const TertiaryButton = ButtonTemplate.bind({});
+
+/**
+ * Secondary Button Instance
+ *
+ */
+export const SecondaryButtonM = ButtonTemplate.bind({});
+
+/**
+ * Tertiary Button Instance
+ *
+ */
+export const TertiaryButtonM = ButtonTemplate.bind({});
+
+/**
+ * Secondary Button Instance
+ *
+ */
+export const SecondaryButtonSm = ButtonTemplate.bind({});
+
+/**
+ * Tertiary Button Instance
+ *
+ */
+export const TertiaryButtonSm = ButtonTemplate.bind({});
+
+/**
+ * Disabled Button Instance
+ *
+ */
+export const DisabledButton = ButtonTemplate.bind({});
+
+/**
+ * Large Button With Icon on the Left Instance
+ *
+ */
+export const LgIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Medium Button With Icon on the Left Instance
+ *
+ */
+export const MIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Small Button With Icon on the Left Instance
+ *
+ */
+export const SmIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Large Button With Icon on the Right Instance
+ *
+ */
+export const LgIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Medium Button With Icon on the Right Instance
+ *
+ */
+export const MIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Small Button With Icon on the Right Instance
+ *
+ */
+export const SmIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Large Button With Icon on the Left Instance
+ *
+ */
+export const LgSecondaryIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Medium Button With Icon on the Left Instance
+ *
+ */
+export const MSecondaryIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Small Button With Icon on the Left Instance
+ *
+ */
+export const SmSecondaryIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Large Button With Icon on the Right Instance
+ *
+ */
+export const LgSecondaryIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Medium Button With Icon on the Right Instance
+ *
+ */
+export const MSecondaryIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Small Button With Icon on the Right Instance
+ *
+ */
+export const SmSecondaryIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Large Button With Icon on the Left Instance
+ *
+ */
+export const LgTertiaryIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Medium Button With Icon on the Left Instance
+ *
+ */
+export const MTertiaryIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Small Button With Icon on the Left Instance
+ *
+ */
+export const SmTertiaryIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Large Button With Icon on the Right Instance
+ *
+ */
+export const LgTertiaryIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Medium Button With Icon on the Right Instance
+ *
+ */
+export const MTertiaryIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Small Button With Icon on the Right Instance
+ *
+ */
+export const SmTertiaryIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Large Button With Icon on the Left Instance
+ *
+ */
+export const LgAlertIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Medium Button With Icon on the Left Instance
+ *
+ */
+export const MAlertIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Small Button With Icon on the Left Instance
+ *
+ */
+export const SmAlertIconLeftButton = ButtonTemplate.bind({});
+
+/**
+ * Large Button With Icon on the Right Instance
+ *
+ */
+export const LgAlertIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Medium Button With Icon on the Right Instance
+ *
+ */
+export const MAlertIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Small Button With Icon on the Right Instance
+ *
+ */
+export const SmAlertIconRightButton = ButtonTemplate.bind({});
+
+/**
+ * Secondary Button Instance
+ *
+ */
+export const ButtonAlertM = ButtonTemplate.bind({});
+
+/**
+ * Tertiary Button Instance
+ *
+ */
+export const ButtonAlertSm = ButtonTemplate.bind({});
+
+// enumerate the props for the large button
+BaseButton.args = buttonArgs.large;
+BaseButton.args.url = "#";
+BaseButton.storyName = "Large Button";
+
+// enumerate the props for the medium button
+MediumButton.args = buttonArgs.medium;
+MediumButton.args.url = "#";
+MediumButton.storyName = "Medium Button";
+
+// enumerate the props for the small button
+SmallButton.args = buttonArgs.small;
+SmallButton.args.url = "#";
+SmallButton.storyName = "Small Button";
+
+// enumerate the props for the primary button
+PrimaryButton.args = buttonArgs.primary;
+PrimaryButton.args.url = "";
+PrimaryButton.storyName = "Primary Button";
+
+// enumerate the props for the secondary button
+SecondaryButton.args = buttonArgs.secondary;
+SecondaryButton.args.url = "";
+SecondaryButton.storyName = "Secondary Button";
+
+// enumerate the props for the tertiary button
+TertiaryButton.args = buttonArgs.tertiary;
+TertiaryButton.args.url = "";
+TertiaryButton.storyName = "Tertiary Button";
+
+// enumerate the props for the secondary button
+SecondaryButtonM.args = buttonArgs.secondarym;
+SecondaryButtonM.args.url = "";
+SecondaryButtonM.storyName = "Secondary Medium";
+
+// enumerate the props for the tertiary button
+TertiaryButtonM.args = buttonArgs.tertiarym;
+TertiaryButtonM.args.url = "";
+TertiaryButtonM.storyName = "Tertiary Medium";
+
+// enumerate the props for the secondary button
+SecondaryButtonSm.args = buttonArgs.secondarysm;
+SecondaryButtonSm.args.url = "";
+SecondaryButtonSm.storyName = "Secondary Small";
+
+// enumerate the props for the tertiary button
+TertiaryButtonSm.args = buttonArgs.tertiarysm;
+TertiaryButtonSm.args.url = "";
+TertiaryButtonSm.storyName = "Tertiary Small";
+
+// enumerate the props for the tertiary button
+ButtonAlertM.args = buttonArgs.alertm;
+ButtonAlertM.args.url = "";
+ButtonAlertM.storyName = "Alert Medium";
+
+// enumerate the props for the secondary button
+ButtonAlertSm.args = buttonArgs.alertsm;
+ButtonAlertSm.args.url = "";
+ButtonAlertSm.storyName = "Alert Small";
+
+// enumerate the props for a disabled button
+DisabledButton.args = buttonArgs.disabled;
+DisabledButton.args.url = "";
+DisabledButton.storyName = "Disabled Button";
+
+// enumerate the props for a large primary icon left button
+LgIconLeftButton.args = buttonArgs.iconleftlgprimary;
+LgIconLeftButton.args.url = "";
+LgIconLeftButton.storyName = "Large Primary Button with icon on left";
+
+// enumerate the props for a medium primary icon left button
+MIconLeftButton.args = buttonArgs.iconleftmprimary;
+MIconLeftButton.args.url = "";
+MIconLeftButton.storyName = "Medium Primary Button with icon on left";
+
+// enumerate the props for a small primary icon left button
+SmIconLeftButton.args = buttonArgs.iconleftsmprimary;
+SmIconLeftButton.args.url = "";
+SmIconLeftButton.storyName = "Small Primary Button with icon on left";
+
+// enumerate the props for a large primary icon right button
+LgIconRightButton.args = buttonArgs.iconrightlgprimary;
+LgIconRightButton.args.url = "";
+LgIconRightButton.storyName = "Large Primary Button with icon on right";
+
+// enumerate the props for a medium primary icon right button
+MIconRightButton.args = buttonArgs.iconrightmprimary;
+MIconRightButton.args.url = "";
+MIconRightButton.storyName = "Medium Primary Button with icon on right";
+
+// enumerate the props for a small primary icon right button
+SmIconRightButton.args = buttonArgs.iconrightsmprimary;
+SmIconRightButton.args.url = "";
+SmIconRightButton.storyName = "Small Primary Button with icon on right;";
+
+// enumerate the props for a large secondary icon left button
+LgSecondaryIconLeftButton.args = buttonArgs.iconleftlgsecondary;
+LgSecondaryIconLeftButton.args.url = "";
+LgSecondaryIconLeftButton.storyName =
+  "Large Secondary Button with icon on left";
+
+// enumerate the props for a medium secondary icon left button
+MSecondaryIconLeftButton.args = buttonArgs.iconleftmsecondary;
+MSecondaryIconLeftButton.args.url = "";
+MSecondaryIconLeftButton.storyName =
+  "Medium Secondary Button with icon on left";
+
+// enumerate the props for a small secondary icon left button
+SmSecondaryIconLeftButton.args = buttonArgs.iconleftsmsecondary;
+SmSecondaryIconLeftButton.args.url = "";
+SmSecondaryIconLeftButton.storyName =
+  "Small Secondary Button with icon on left";
+
+// enumerate the props for a large secondary icon right button
+LgSecondaryIconRightButton.args = buttonArgs.iconrightlgsecondary;
+LgSecondaryIconRightButton.args.url = "";
+LgSecondaryIconRightButton.storyName =
+  "Large Secondary Button with icon on right";
+
+// enumerate the props for a medium secondary icon right button
+MSecondaryIconRightButton.args = buttonArgs.iconrightmsecondary;
+MSecondaryIconRightButton.args.url = "";
+MSecondaryIconRightButton.storyName =
+  "Medium Secondary Button with icon on right";
+
+// enumerate the props for a small secondary icon right button
+SmSecondaryIconRightButton.args = buttonArgs.iconrightsmsecondary;
+SmSecondaryIconRightButton.args.url = "";
+SmSecondaryIconRightButton.storyName =
+  "Small Secondary Button with icon on right;";
+
+// enumerate the props for a large tertiary icon left button
+LgTertiaryIconLeftButton.args = buttonArgs.iconleftlgtertiary;
+LgTertiaryIconLeftButton.args.url = "";
+LgTertiaryIconLeftButton.storyName = "Large Tertiary Button with icon on left";
+
+// enumerate the props for a medium tertiary icon left button
+MTertiaryIconLeftButton.args = buttonArgs.iconleftmtertiary;
+MTertiaryIconLeftButton.args.url = "";
+MTertiaryIconLeftButton.storyName = "Medium Tertiary Button with icon on left";
+
+// enumerate the props for a small tertiary icon left button
+SmTertiaryIconLeftButton.args = buttonArgs.iconleftsmtertiary;
+SmTertiaryIconLeftButton.args.url = "";
+SmTertiaryIconLeftButton.storyName = "Small Tertiary Button with icon on left";
+
+// enumerate the props for a large tertiary icon right button
+LgTertiaryIconRightButton.args = buttonArgs.iconrightlgtertiary;
+LgTertiaryIconRightButton.args.url = "";
+LgTertiaryIconRightButton.storyName =
+  "Large Tertiary Button with icon on right";
+
+// enumerate the props for a medium tertiary icon right button
+MTertiaryIconRightButton.args = buttonArgs.iconrightmtertiary;
+MTertiaryIconRightButton.args.url = "";
+MTertiaryIconRightButton.storyName =
+  "Medium Tertiary Button with icon on right";
+
+// enumerate the props for a small tertiary icon right button
+SmTertiaryIconRightButton.args = buttonArgs.iconrightsmtertiary;
+SmTertiaryIconRightButton.args.url = "";
+SmTertiaryIconRightButton.storyName =
+  "Small Tertiary Button with icon on right;";
+
+// enumerate the props for a large alert icon left button
+LgAlertIconLeftButton.args = buttonArgs.iconleftlgalert;
+LgAlertIconLeftButton.args.url = "";
+LgAlertIconLeftButton.storyName = "Large Alert Button with icon on left";
+
+// enumerate the props for a medium alert icon left button
+MAlertIconLeftButton.args = buttonArgs.iconleftmalert;
+MAlertIconLeftButton.args.url = "";
+MAlertIconLeftButton.storyName = "Medium Alert Button with icon on left";
+
+// enumerate the props for a small alert icon left button
+SmAlertIconLeftButton.args = buttonArgs.iconleftsmalert;
+SmAlertIconLeftButton.args.url = "";
+SmAlertIconLeftButton.storyName = "Small Alert Button with icon on left";
+
+// enumerate the props for a large alert icon right button
+LgAlertIconRightButton.args = buttonArgs.iconrightlgalert;
+LgAlertIconRightButton.args.url = "";
+LgAlertIconRightButton.storyName = "Large Alert Button with icon on right";
+
+// enumerate the props for a medium alert icon right button
+MAlertIconRightButton.args = buttonArgs.iconrightmalert;
+MAlertIconRightButton.args.url = "";
+MAlertIconRightButton.storyName = "Medium Alert Button with icon on right";
+
+// enumerate the props for a small alert icon right button
+SmAlertIconRightButton.args = buttonArgs.iconrightsmalert;
+SmAlertIconRightButton.args.url = "";
+SmAlertIconRightButton.storyName = "Small Alert Button with icon on right;";

package/src/stories/Callout.stories.tsx

@@ -0,0 +1,154 @@
+import { Story, Meta } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  Subheading,
+} from "@storybook/addon-docs";
+import { Callout } from "../components/Callout";
+import { CalloutProps } from "../components/Callout/Callout.props";
+import calloutArgs from "../components/Callout/Callout.args";
+
+const themeDoc = `
+By changing the \`type\` prop you can change base coloring of the links. By default this is set to \`info\`.
+
+| Theme   |  Description  |
+|----------|-------------|
+| \`info\` | Callout color and icon for info block. |
+| \`error\` | Callout color and icon for error block. |
+| \`success\` | Callout color and icon for success block. |
+| \`warning\` | Callout color and icon for warning block. |
+`;
+
+/**
+ * Callout Story
+ *
+ */
+export default {
+  title: "Components/Callout",
+  component: Callout,
+  argTypes: {},
+  parameters: {
+    componentSubtitle: "Component",
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The Callout component provides an inline alert or message to end
+            users.
+          </Description>
+          <Primary />
+          <ArgsTable />
+          <Subheading>Theme Prop</Subheading>
+          <Description>{themeDoc}</Description>
+          <Stories title="Examples"></Stories>
+        </>
+      ),
+    },
+  },
+} as Meta<typeof Callout>;
+
+/**
+ * Info Callout Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const InfoCalloutTemplate: Story<CalloutProps> = (args) => (
+  <Callout {...calloutArgs.infoCallout} {...args}>
+    That Biff, what a character. Always trying to get away with something. Been
+    on top of Biff ever since high school. Although, if it wasn't for him - Yes,
+    yes, I'm George, George McFly, and I'm your density. I mean, I'm your
+    destiny. Right.
+  </Callout>
+);
+
+/**
+ * Error Callout Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const ErrorCalloutTemplate: Story<CalloutProps> = (args) => (
+  <Callout {...calloutArgs.errorCallout} {...args}>
+    That Biff, what a character. Always trying to get away with something. Been
+    on top of Biff ever since high school. Although, if it wasn't for him - Yes,
+    yes, I'm George, George McFly, and I'm your density. I mean, I'm your
+    destiny. Right.
+  </Callout>
+);
+
+/**
+ * Success Callout Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const SuccessCalloutTemplate: Story<CalloutProps> = (args) => (
+  <Callout {...calloutArgs.successCallout} {...args}>
+    That Biff, what a character. Always trying to get away with something. Been
+    on top of Biff ever since high school. Although, if it wasn't for him - Yes,
+    yes, I'm George, George McFly, and I'm your density. I mean, I'm your
+    destiny. Right.
+  </Callout>
+);
+
+/**
+ * Warning Callout Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const WarningCalloutTemplate: Story<CalloutProps> = (args) => (
+  <Callout {...calloutArgs.warningCallout} {...args}>
+    That Biff, what a character. Always trying to get away with something. Been
+    on top of Biff ever since high school. Although, if it wasn't for him - Yes,
+    yes, I'm George, George McFly, and I'm your density. I mean, I'm your
+    destiny. Right.
+  </Callout>
+);
+
+/**
+ * Info Callout Instance
+ *
+ */
+export const InfoCallout = InfoCalloutTemplate.bind({});
+
+/**
+ * Error Callout Instance
+ *
+ */
+export const ErrorCallout = ErrorCalloutTemplate.bind({});
+
+/**
+ * Success Callout Instance
+ *
+ */
+export const SuccessCallout = SuccessCalloutTemplate.bind({});
+
+/**
+ * Warning Callout Instance
+ *
+ */
+export const WarningCallout = WarningCalloutTemplate.bind({});
+
+// enumerate the props for the Info Callout
+InfoCallout.storyName = "Info Callout";
+
+// enumerate the props Error Callout
+ErrorCallout.storyName = "Error Callout";
+
+// enumerate the props Success Callout
+SuccessCallout.storyName = "Success Callout";
+
+// enumerate the props Warning Callout
+WarningCallout.storyName = "Warning Callout";

package/src/stories/ContextMenu.stories.tsx

@@ -0,0 +1,72 @@
+import { Story, Meta } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+} from "@storybook/addon-docs";
+import { ContextMenu } from "../components/ContextMenu";
+import { ContextMenuProps } from "../components/ContextMenu/ContextMenu.props";
+import contextMenuArgs from "../components/ContextMenu/ContextMenu.args";
+
+const propsDoc = `
+The ContextMenu receives a list of urls with labels and an optional prop indicating if this link is at the end of a 'section.'
+
+| Prop  |  Description  |
+|----------|-------------|
+| \`endsection\` | Boolean - is this at the end of a 'section'? |
+| \`label\` | Label for this link. |
+| \`url\` | URL for this link. |
+`;
+
+/**
+ * ContextMenu Story
+ *
+ */
+export default {
+  title: "Components/ContextMenu",
+  component: ContextMenu,
+  parameters: {
+    componentSubtitle: "Component",
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The ContextMenu component is used to display information about a
+            person.
+          </Description>
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Description>{propsDoc}</Description>
+          <Stories title="Examples"></Stories>
+        </>
+      ),
+    },
+  },
+} as Meta<typeof ContextMenu>;
+
+/**
+ * ContextMenu Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const ContextMenuTemplate: Story<ContextMenuProps> = (args) => (
+  <ContextMenu {...args} />
+);
+
+export const Basic = ContextMenuTemplate.bind({});
+
+export const WithSection = ContextMenuTemplate.bind({});
+
+// enumerate the props for the variations on the ContextMenu component
+Basic.args = contextMenuArgs.basic;
+Basic.storyName = "ContextMenu - Basic";
+
+WithSection.args = contextMenuArgs.withsection;
+WithSection.storyName = "ContextMenu - With A 'Section'";