@autoguru/overdrive 4.14.2 → 4.14.4

package/dist/components/DividerLine/DividerLine.d.ts

@@ -1,12 +1,11 @@
 import { ComponentProps, FunctionComponent } from 'react';
 import { Box } from '../';
-import { Tokens } from '../../themes/tokens';
 import * as styles from './DividerLine.css';
 interface Props {
     isVertical?: boolean;
     className?: string;
     space: ComponentProps<typeof Box>['marginY'];
-    colour?: keyof Tokens['colours']['intent'];
+    colour?: ComponentProps<typeof Box>['backgroundColour'];
     size?: keyof typeof styles.size['horizontal'];
 }
 export declare const DividerLine: FunctionComponent<Props>;

package/dist/components/DividerLine/DividerLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DividerLine.d.ts","sourceRoot":"","sources":["../../../lib/components/DividerLine/DividerLine.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAE5C,UAAU,KAAK;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAgBhD,CAAC"}
+{"version":3,"file":"DividerLine.d.ts","sourceRoot":"","sources":["../../../lib/components/DividerLine/DividerLine.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAE5C,UAAU,KAAK;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,kBAAkB,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAgBhD,CAAC"}

package/dist/components/TextLink/TextLink.css.d.ts

@@ -1,3 +1,4 @@
 export declare const root: string;
+export declare const icon: string;
 export declare const muted: string;
 //# sourceMappingURL=TextLink.css.d.ts.map

package/dist/components/TextLink/TextLink.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.css.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QASf,CAAC;AAEH,eAAO,MAAM,KAAK,QAKhB,CAAC"}
+{"version":3,"file":"TextLink.css.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QASf,CAAC;AAEH,eAAO,MAAM,IAAI,QAKf,CAAC;AAGH,eAAO,MAAM,KAAK,QAKhB,CAAC"}

package/dist/components/TextLink/TextLink.css.js

@@ -14,6 +14,12 @@ export const root = style({
     boxShadow: "inset 0 -2px 0 0 ".concat(vars.typography.colour.link)
   }
 }, "root");
+export const icon = style({
+  transition: "transform 0.2s ".concat(vars.animation.easing.decelerate, " 0s"),
+  right: 0,
+  top: '50%',
+  transform: 'translateY(-50%)'
+}, "icon");
 export const muted = style({
   ':hover': {
     color: 'white',

package/dist/components/TextLink/TextLink.d.ts

@@ -1,3 +1,4 @@
+import { IconType } from '@autoguru/icons';
 import * as React from 'react';
 import { AnchorHTMLAttributes, ComponentProps, ElementType, ReactElement, ReactNode } from 'react';
 import { Text } from '../Text';
@@ -8,6 +9,7 @@ export interface Props extends TextProps, AnchorProps {
     className?: string;
     is?: ElementType | ReactElement;
     muted?: boolean;
+    icon?: IconType;
 }
 export declare const TextLink: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
 export default TextLink;

package/dist/components/TextLink/TextLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,oBAAoB,EAEpB,cAAc,EAEd,WAAW,EAGX,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC,CAAC;AACpE,KAAK,WAAW,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,SAAS,CAC7C,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,WAAW;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,iFA0DpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,oBAAoB,EAEpB,cAAc,EAEd,WAAW,EAGX,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC,CAAC;AACpE,KAAK,WAAW,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,SAAS,CAC7C,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,WAAW;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,iFAoEpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/TextLink/TextLink.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["is", "children", "className", "strong", "fontWeight", "muted", "size"];
+const _excluded = ["is", "children", "className", "strong", "fontWeight", "muted", "size", "icon"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { invariant } from '@autoguru/utilities';
@@ -10,9 +10,11 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { cloneElement, createElement, forwardRef, isValidElement } from 'react';
 import { Box, useBoxStyles } from "../Box/index.js";
+import { Icon } from "../Icon/index.js";
 import { Text } from "../Text/index.js";
 import * as styles from "./TextLink.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const TextLink = forwardRef((_ref, ref) => {
   var _props$rel;
   let {
@@ -22,11 +24,12 @@ export const TextLink = forwardRef((_ref, ref) => {
       strong,
       fontWeight = 'semiBold',
       muted = false,
-      size
+      size,
+      icon
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   !!(Component !== undefined && props.href !== undefined) ? process.env.NODE_ENV !== "production" ? invariant(false, 'You cannot have both href and as defined.') : invariant(false) : void 0;
-  const body = _jsx(Text, {
+  const body = _jsxs(Text, {
     is: "span",
     colour: muted ? 'muted' : 'link',
     size: size,
@@ -34,11 +37,20 @@ export const TextLink = forwardRef((_ref, ref) => {
     strong: strong,
     className: clsx(useBoxStyles({
       is: 'span',
-      pointerEvents: 'none'
+      pointerEvents: 'none',
+      position: 'relative',
+      paddingRight: icon ? '5' : void 0
     }), {
       [styles.muted]: muted
     }),
-    children: children
+    children: [children, icon ? _jsx(Icon, {
+      icon: icon,
+      size: "small",
+      display: "inlineBlock",
+      className: clsx(styles.icon, useBoxStyles({
+        position: 'absolute'
+      }))
+    }) : null]
   });
   const allProps = _objectSpread(_objectSpread({
     rel: (_props$rel = props.rel) !== null && _props$rel !== void 0 ? _props$rel : 'noopener noreferrer'

package/dist/components/TextLink/stories.js

@@ -3,6 +3,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { ArrowRightIcon, ChevronRightIcon } from '@autoguru/icons';
 import * as React from 'react';
 import { Box } from "../Box/index.js";
 import { Text } from "../Text/index.js";
@@ -12,6 +13,10 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const sizeScale = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
 const alignOptions = ['left', 'center', 'right'];
 const fontWeightOptions = ['normal', 'semiBold', 'bold'];
+const iconOptions = {
+  ArrowRightIcon,
+  ChevronRightIcon
+};
 const noWrapOptions = [false, true];
 const transformOptions = ['uppercase', 'capitalize', undefined];
 export default {
@@ -26,6 +31,14 @@ export default {
     children: story()
   })],
   argTypes: {
+    icon: {
+      defaultValue: void 0,
+      description: 'Input field Icon',
+      options: iconOptions,
+      control: {
+        type: 'select'
+      }
+    },
     noWrap: {
       options: noWrapOptions,
       defaultValue: false,
@@ -88,4 +101,11 @@ const standardProps = {
 export const standard = Template.bind(standardProps);
 standard.args = standardProps;
 export const insideParagraph = InsideParagraphTemplate.bind(standardProps);
-insideParagraph.args = standardProps;
+insideParagraph.args = standardProps;
+const withIconProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  icon: ArrowRightIcon
+});
+export const withIcon = Template.bind(withIconProps);
+withIcon.args = withIconProps;
+export const withIconInsideParagraph = InsideParagraphTemplate.bind(withIconProps);
+withIconInsideParagraph.args = withIconProps;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.14.2",
+	"version": "4.14.4",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",