@ilo-org/react 0.0.18 → 0.1.1

package/src/stories/Button.stories.tsx

@@ -1,375 +0,0 @@
-import { Meta, Story } 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 mainDoc = `
-### Usage
-Buttons are used primarily on action items (for actions like submitting a form, or triggering open a modal) that do not navigate the user to another page or view, though sometimes an anchor element may be styled as a button. (See below regarding the \`url\` prop).
-`;
-
-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. |
-`;
-
-const iconDoc = `
-By changing the \`icon\` and \`iconPosition\` props you can set the icon to use, and set its position in the button. Additonally, you can set the \`icononly\` prop to \`true\` if you want the button's label to be visually hidden.
-
-| Prop   |  Description  |
-|----------|-------------|
-| \`icon\` | Sets the icon. Must match the name of an icon in the @ilo-org icons package. |
-| \`iconPosition\` | left or right. On which side of the label does the icon display? |
-| \`icononly\` | Boolean. If true, no label is shown visually (though one is still provided to screen readers). |
-`;
-
-const hrefDoc = `
-Populating the \`url\` prop with a valid url and/or an anchor to an id in the current document (e.g. \`#my-id\`) will result in the same design being displayed, but "under the hood," in the html, an \`<a>\` element will be used, allowing link functionality. When this is populated, the \`target\` prop is also read. Populating this, sets the \`target\` attribute of the anchor tag, which opens the link url in a new tab or window.
-
-| Prop   |  Description  |
-|----------|-------------|
-| \`url\` | Should be a valid url or anchor in the page. |
-| \`target\` | Should be a valid value for the anchor tag's target attribute. |
-`;
-
-/**
- * Button Story
- *
- */
-export default {
-  title: "Components/Button",
-  component: Button,
-  argTypes: {
-    size: {
-      options: ["large", "medium", "small"],
-      control: { type: "select" },
-    },
-    type: {
-      options: ["primary", "secondary", "tertiary"],
-      control: { type: "select" },
-    },
-    icononly: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-    iconPosition: {
-      options: ["left", "center", "right"],
-      control: { type: "select" },
-    },
-    opensmodal: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-  },
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>{mainDoc}</Description>
-          <Primary />
-          <ArgsTable />
-          <Subheading>Theme Prop</Subheading>
-          <Description>{themeDoc}</Description>
-          <Subheading>Type Prop</Subheading>
-          <Description>{typeDoc}</Description>
-          <Subheading>Icon Props</Subheading>
-          <Description>{iconDoc}</Description>
-          <Subheading>Link Props</Subheading>
-          <Description>{hrefDoc}</Description>
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof Button>;
-
-/**
- * Base Button Template
- *
- * create a Storybook template for this component
- *
- *@param args (Array) - props to be passed to the component
- */
-const BaseButtonTemplate: Story<ButtonProps> = (args) => <Button {...args} />;
-
-/**
- * Base Button Instance
- *
- */
-export const A_BaseButton = BaseButtonTemplate.bind({});
-// enumerate the props for the base button
-// @ts-ignore
-A_BaseButton.args = buttonArgs.primary;
-A_BaseButton.storyName = "Default Button";
-
-/**
- * Primary Button Template
- *
- * create a Storybook template for this component
- *
- *@param args (Object) - props to be passed to the component
- */
-const PrimaryButtonTemplate: Story<ButtonProps> = (args) => (
-  <>
-    {primarybuttons.map((button, i) => (
-      <Button
-        {...args}
-        label={button.label}
-        size={button.size}
-        target={button.target}
-        kind={button.kind}
-        disabled={button.disabled}
-        type={button.type}
-        url={button.url}
-        icon={button.icon}
-        icononly={button.icononly}
-        iconPosition={button.iconPosition}
-        key={i}
-      />
-    ))}
-    <Button {...primarybuttons[0]} label={`Disabled Primary`} disabled={true} />
-  </>
-);
-
-/**
- * Primary Button Instance
- *
- */
-export const B_PrimaryButton = PrimaryButtonTemplate.bind({});
-const primarybuttons = [
-  buttonArgs.primary,
-  buttonArgs.iconleftlgprimary,
-  buttonArgs.iconrightlgprimary,
-  buttonArgs.icononlylgprimary,
-  buttonArgs.medium,
-  buttonArgs.iconleftmprimary,
-  buttonArgs.iconrightmprimary,
-  buttonArgs.icononlymprimary,
-  buttonArgs.small,
-  buttonArgs.iconleftsmprimary,
-  buttonArgs.iconrightsmprimary,
-  buttonArgs.icononlysmprimary,
-];
-// @ts-ignore
-B_PrimaryButton.storyName = "Primary Button";
-B_PrimaryButton.parameters = {
-  docs: {
-    description: {
-      story:
-        "Primary buttons are the default button style, most-often used. They usually indicate positive action.",
-    },
-  },
-};
-
-/**
- * Secondary Button Template
- *
- * create a Storybook template for this component
- *
- *@param args (Object) - props to be passed to the component
- */
-const SecondaryButtonTemplate: Story<ButtonProps> = (args) => (
-  <>
-    {secondarybuttons.map((button, i) => (
-      <Button
-        {...args}
-        label={button.label}
-        size={button.size}
-        target={button.target}
-        kind={button.kind}
-        disabled={button.disabled}
-        type={button.type}
-        url={button.url}
-        icon={button.icon}
-        icononly={button.icononly}
-        iconPosition={button.iconPosition}
-        key={i}
-      />
-    ))}
-    <Button
-      {...secondarybuttons[0]}
-      label={`Disabled Secondary`}
-      disabled={true}
-    />
-  </>
-);
-
-/**
- * Medium Button Instance
- *
- */
-export const C_SecondaryButton = SecondaryButtonTemplate.bind({});
-
-const secondarybuttons = [
-  buttonArgs.secondary,
-  buttonArgs.iconleftlgsecondary,
-  buttonArgs.iconrightlgsecondary,
-  buttonArgs.icononlylgsecondary,
-  buttonArgs.secondarym,
-  buttonArgs.iconleftmsecondary,
-  buttonArgs.iconrightmsecondary,
-  buttonArgs.icononlymsecondary,
-  buttonArgs.secondarysm,
-  buttonArgs.iconleftsmsecondary,
-  buttonArgs.iconrightsmsecondary,
-  buttonArgs.icononlysmsecondary,
-];
-C_SecondaryButton.storyName = "Secondary Button";
-C_SecondaryButton.parameters = {
-  docs: {
-    description: {
-      story:
-        "Secondary buttons are usually seen alongside Primary buttons when there are two action options, especially a positive and a negative option (e.g. a Cancel button next to a Submit button) or when there is a hierarchy of action (for example, the File Upload button in a form is a Secondary Button and the Submit button is a Primary button).",
-    },
-  },
-};
-
-/**
- * Tertiary Button Template
- *
- * create a Storybook template for this component
- *
- *@param args (Object) - props to be passed to the component
- */
-const TertiaryButtonTemplate: Story<ButtonProps> = (args) => (
-  <>
-    {tertiarybuttons.map((button, i) => (
-      <Button
-        {...args}
-        label={button.label}
-        size={button.size}
-        target={button.target}
-        kind={button.kind}
-        disabled={button.disabled}
-        type={button.type}
-        url={button.url}
-        icon={button.icon}
-        icononly={button.icononly}
-        iconPosition={button.iconPosition}
-        key={i}
-      />
-    ))}
-    <Button
-      {...tertiarybuttons[0]}
-      label={`Disabled Tertiary`}
-      disabled={true}
-    />
-  </>
-);
-
-/**
- * Tertiary Button Instance
- *
- */
-export const D_TertiaryButton = TertiaryButtonTemplate.bind({});
-
-const tertiarybuttons = [
-  buttonArgs.tertiary,
-  buttonArgs.iconleftlgtertiary,
-  buttonArgs.iconrightlgtertiary,
-  buttonArgs.icononlylgtertiary,
-  buttonArgs.tertiarym,
-  buttonArgs.iconleftmtertiary,
-  buttonArgs.iconrightmtertiary,
-  buttonArgs.icononlymtertiary,
-  buttonArgs.tertiarysm,
-  buttonArgs.iconleftsmtertiary,
-  buttonArgs.iconrightsmtertiary,
-  buttonArgs.icononlysmtertiary,
-];
-D_TertiaryButton.storyName = "Tertiary Button";
-D_TertiaryButton.parameters = {
-  docs: {
-    description: {
-      story:
-        "Tertiary buttons are used when the action taken is not of primary importance to the component functionality, especially when the action is optional (for example, the call to action in a Callout component).",
-    },
-  },
-};
-
-/**
- * Alert Button Template
- *
- * create a Storybook template for this component
- *
- *@param args (Object) - props to be passed to the component
- */
-const AlertButtonTemplate: Story<ButtonProps> = (args) => (
-  <>
-    {alertbuttons.map((button, i) => (
-      <Button
-        {...args}
-        label={button.label}
-        size={button.size}
-        target={button.target}
-        kind={button.kind}
-        disabled={button.disabled}
-        type={button.type}
-        url={button.url}
-        icon={button.icon}
-        icononly={button.icononly}
-        iconPosition={button.iconPosition}
-        key={i}
-      />
-    ))}
-    <Button {...alertbuttons[0]} label={`Disabled Alert`} disabled={true} />
-  </>
-);
-
-/**
- * Alert Button Instance
- *
- */
-export const E_AlertButton = AlertButtonTemplate.bind({});
-
-const alertbuttons = [
-  buttonArgs.alert,
-  buttonArgs.iconleftlgalert,
-  buttonArgs.iconrightlgalert,
-  buttonArgs.icononlylgalert,
-  buttonArgs.alertm,
-  buttonArgs.iconleftmalert,
-  buttonArgs.iconrightmalert,
-  buttonArgs.icononlymalert,
-  buttonArgs.alertsm,
-  buttonArgs.iconleftsmalert,
-  buttonArgs.iconrightsmalert,
-  buttonArgs.icononlysmalert,
-];
-E_AlertButton.storyName = "Alert Button";
-E_AlertButton.parameters = {
-  docs: {
-    description: {
-      story:
-        "Alert buttons are used when the action resolves an emergecny or responds to an alert.",
-    },
-  },
-};

package/src/stories/Callout.stories.tsx

@@ -1,195 +0,0 @@
-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: {
-    isCollapsible: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-    isOpen: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-    type: {
-      options: ["info", "error", "success", "warning"],
-      control: { type: "select" },
-    },
-  },
-  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";
-InfoCallout.parameters = {
-  docs: {
-    description: {
-      story: "The Info Callout is for",
-    },
-  },
-};
-
-// enumerate the props Error Callout
-ErrorCallout.storyName = "Error Callout";
-ErrorCallout.parameters = {
-  docs: {
-    description: {
-      story: "The Error Callout is for",
-    },
-  },
-};
-
-// enumerate the props Success Callout
-SuccessCallout.storyName = "Success Callout";
-SuccessCallout.parameters = {
-  docs: {
-    description: {
-      story: "The Success Callout is for",
-    },
-  },
-};
-
-// enumerate the props Warning Callout
-WarningCallout.storyName = "Warning Callout";
-WarningCallout.parameters = {
-  docs: {
-    description: {
-      story: "The Warning Callout is for",
-    },
-  },
-};

package/src/stories/ContextMenu.stories.tsx

@@ -1,80 +0,0 @@
-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 a list of contextual
-            links.
-          </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'";
-WithSection.parameters = {
-  docs: {
-    description: {
-      story:
-        "The Context menu iteams can each be marked, via the `endsection` prop, as a *section*, which display a 100% width bottom border.",
-    },
-  },
-};