@jobber/components-native 0.99.0 → 0.99.1-scotttco-d3b1f77.4

package/dist/docs/ActionItem/ActionItem.props-mobile.json

@@ -0,0 +1,136 @@
+[
+  {
+    "tags": {},
+    "filePath": "../components-native/src/ActionItem/ActionItem.tsx",
+    "description": "",
+    "displayName": "ActionItem",
+    "methods": [],
+    "props": {
+      "title": {
+        "defaultValue": null,
+        "description": "Title of the Action Item",
+        "name": "title",
+        "parent": {
+          "fileName": "../components-native/src/ActionItem/ActionItem.tsx",
+          "name": "ActionItemProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "icon": {
+        "defaultValue": null,
+        "description": "Name of the icon to display before content",
+        "name": "icon",
+        "parent": {
+          "fileName": "../components-native/src/ActionItem/ActionItem.tsx",
+          "name": "ActionItemProps"
+        },
+        "required": false,
+        "type": {
+          "name": "IconNames"
+        }
+      },
+      "iconColor": {
+        "defaultValue": null,
+        "description": "Colour of the icon displayed before content",
+        "name": "iconColor",
+        "parent": {
+          "fileName": "../components-native/src/ActionItem/ActionItem.tsx",
+          "name": "ActionItemProps"
+        },
+        "required": false,
+        "type": {
+          "name": "\"task\" | \"text\" | \"warning\" | \"icon\" | \"white\" | \"grey\" | \"greyBlue\" | \"greyBlueDark\" | \"greyBlueLighter\" | \"blue\" | \"lightBlue\" | \"green\" | \"yellow\" | \"red\" | \"navy\" | \"orange\" | ... 33 more ... | \"brandHighlight\""
+        }
+      },
+      "children": {
+        "defaultValue": null,
+        "description": "Content to display.",
+        "name": "children",
+        "parent": {
+          "fileName": "../components-native/src/ActionItem/ActionItem.tsx",
+          "name": "ActionItemProps"
+        },
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "actionIcon": {
+        "defaultValue": {
+          "value": "edit"
+        },
+        "description": "Action icon to display",
+        "name": "actionIcon",
+        "parent": {
+          "fileName": "../components-native/src/ActionItem/ActionItem.tsx",
+          "name": "ActionItemProps"
+        },
+        "required": false,
+        "type": {
+          "name": "ActionIconNames"
+        }
+      },
+      "actionIconColour": {
+        "defaultValue": {
+          "value": "interactive"
+        },
+        "description": "Colour of the action icon",
+        "name": "actionIconColour",
+        "parent": {
+          "fileName": "../components-native/src/ActionItem/ActionItem.tsx",
+          "name": "ActionItemProps"
+        },
+        "required": false,
+        "type": {
+          "name": "ActionIconColour"
+        }
+      },
+      "actionIconAlignment": {
+        "defaultValue": {
+          "value": "center"
+        },
+        "description": "Alignment of action icon",
+        "name": "actionIconAlignment",
+        "parent": {
+          "fileName": "../components-native/src/ActionItem/ActionItem.tsx",
+          "name": "ActionItemProps"
+        },
+        "required": false,
+        "type": {
+          "name": "\"flex-start\" | \"flex-end\" | \"center\""
+        }
+      },
+      "onPress": {
+        "defaultValue": null,
+        "description": "Press handler",
+        "name": "onPress",
+        "parent": {
+          "fileName": "../components-native/src/ActionItem/ActionItem.tsx",
+          "name": "ActionItemProps"
+        },
+        "required": false,
+        "type": {
+          "name": "() => void"
+        }
+      },
+      "testID": {
+        "defaultValue": {
+          "value": "actionItem"
+        },
+        "description": "",
+        "name": "testID",
+        "parent": {
+          "fileName": "../components-native/src/ActionItem/ActionItem.tsx",
+          "name": "ActionItemProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    }
+  }
+]

package/dist/docs/ActionItem/ActionItem.stories.mdx

@@ -0,0 +1,58 @@
+import { Meta } from "@storybook/addon-docs";
+import { Figma } from "@storybook/addon-designs/blocks";
+
+<Meta title="Components/Layouts and Structure/ActionItem" />
+
+# Action Item
+
+ActionItem allows for consistent presentation of text content that can be
+actioned on. It can use icons to provide additional visual context about the
+text content.
+
+## Design & usage guidelines
+
+The ActionItem will provide a familiar pattern for enhancing text content with
+icons and providing actions.
+
+ActionItem is commonly used [in a Card](/components/Card), where it can be
+grouped with other ActionItems or other elements as needed.
+
+If the action appears directly related to the title, or otherwise is not
+well-suited to be centered in the ActionItem, you can
+[align the action](/storybook/mobile/?path=/story/components-layouts-and-structure-actionitem--action-alignment)
+as needed.
+
+## Content guidelines
+
+ActionItem provides a pre-styled `title`, which can be used to consistently
+title the element. You can use the
+[title](/storybook/mobile/?path=/story/components-layouts-and-structure-actionitem--title-only)
+and not pass any children. This is useful when you have empty states that
+require the user's attention.
+
+When an `onPress` is provided, the entire ActionItem is tappable for easy
+interactivity. If a child of the ActionItem has an `onPress`, tapping directly
+on that child will trigger the child item's `onPress`.
+
+Child content can be whatever you need but typically consists of
+[Text](/components/Text).
+
+## Related components
+
+To group multiple ActionItems together with dividers between them, use
+[ActionItemGroup](/components/ActionItemGroup).
+
+ActionItem is commonly consumed by [Card](/components/Card). In most cases, it
+will also render at least one [Icon](/components/Icon).
+
+## Accessibility
+
+The Icons in ActionItem should not be announced to assistive technology. The
+entire contents of the ActionItem should be read as one element.
+
+## Mockup
+
+<Figma
+  collapsable
+  url="https://www.figma.com/file/avvgu5SkbBvS8lGVePBsqO/%F0%9F%92%99-Product%2FMobile?node-id=41947%3A224683"
+/>

package/dist/docs/ActionItemGroup/ActionItemGroup.props-mobile.json

@@ -0,0 +1 @@
+[]

package/dist/docs/ActionItemGroup/ActionItemGroup.stories.mdx

@@ -0,0 +1,37 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Components/Layouts and Structure/ActionItemGroup" />
+
+# Action Item Group
+
+ActionItemGroup is a layout wrapper allowing for quick and easy grouping of
+[ActionItems](/components/ActionItem). It can also house other content alongside
+an ActionItem if needed.
+
+## Design & usage guidelines
+
+The ActionItemGroup makes it easy to consistently display several ActionItems
+alongside each other with dividers to segment each item.
+
+## Content guidelines
+
+You'll mostly be passing ActionItems into ActionItemGroup, but as shown it can
+handle other content types if needed.
+
+In forms in particular, you may find the need to add other elements into the
+group. You may need to use [Content](/components/Content) or write some styling
+to get things aligned. In the Mixed Components
+[example](/storybook/mobile/?path=/story/components-layouts-and-structure-actionitemgroup--mixed-components)
+you can see Content being used to layout [Text](/components/Text) and
+[Typography](/components/Typography) alongside some
+[ActionItems](/components/ActionItem).
+
+## Related components
+
+If you only need one [ActionItem](/components/ActionItem), you can use that on
+its own without this wrapper.
+
+## Accessibility
+
+ActionItemGroup is just a layout wrapper and does not communicate anything to
+screen-readers - that's the job of its children.

package/dist/docs/ActionLabel/ActionLabel.props-mobile.json

@@ -0,0 +1,84 @@
+[
+  {
+    "tags": {},
+    "filePath": "../components-native/src/ActionLabel/ActionLabel.tsx",
+    "description": "",
+    "displayName": "ActionLabel",
+    "methods": [],
+    "props": {
+      "children": {
+        "defaultValue": null,
+        "description": "Text to display. Supports nesting text elements.",
+        "name": "children",
+        "parent": {
+          "fileName": "../components-native/src/ActionLabel/ActionLabel.tsx",
+          "name": "ActionLabelProps"
+        },
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "disabled": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Set the display text to disabled color",
+        "name": "disabled",
+        "parent": {
+          "fileName": "../components-native/src/ActionLabel/ActionLabel.tsx",
+          "name": "ActionLabelProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "variation": {
+        "defaultValue": {
+          "value": "interactive"
+        },
+        "description": "The text color",
+        "name": "variation",
+        "parent": {
+          "fileName": "../components-native/src/ActionLabel/ActionLabel.tsx",
+          "name": "ActionLabelProps"
+        },
+        "required": false,
+        "type": {
+          "name": "ActionLabelVariation"
+        }
+      },
+      "type": {
+        "defaultValue": {
+          "value": "default"
+        },
+        "description": "Changes the appearance to match the style of where it's getting used",
+        "name": "type",
+        "parent": {
+          "fileName": "../components-native/src/ActionLabel/ActionLabel.tsx",
+          "name": "ActionLabelProps"
+        },
+        "required": false,
+        "type": {
+          "name": "ActionLabelType"
+        }
+      },
+      "align": {
+        "defaultValue": {
+          "value": "center"
+        },
+        "description": "Alignment of action label",
+        "name": "align",
+        "parent": {
+          "fileName": "../components-native/src/ActionLabel/ActionLabel.tsx",
+          "name": "ActionLabelProps"
+        },
+        "required": false,
+        "type": {
+          "name": "TextAlign"
+        }
+      }
+    }
+  }
+]

package/dist/docs/ActionLabel/ActionLabel.stories.mdx

@@ -0,0 +1,34 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Components/Actions/ActionLabel" />
+
+# Action Label
+
+The ActionLabel is a base component that is widely used in areas that have an
+`onPress` action, like a button.
+
+The aim is to reduce the number of inconsistencies when a designer or an
+engineer decides to build a pressable component that has text on it. This makes
+it easier to maintain consistency in how we visually present tappable actions.
+
+## Design & usage guidelines
+
+ActionLabel supports similar semantic variations as Button:
+
+- default (equivalent to "work")
+- learning
+- destructive
+- subtle
+
+with an additional variation of `onPrimary` which should be used when the
+ActionLabel is consumed by a primary Button or other dark surface.
+
+#### Disable pattern
+
+**As a best practice, do not design with disabled button states. **
+
+This has negative impacts on accessibility as well as an increase in complexity
+for users to understand why the interface is disabled and how to resolve it.
+
+With that said, if you can't design a flow without a disabled state, you can add
+a `disabled` prop to the ActionLabel component.