@autoguru/overdrive 4.22.0 → 4.23.0

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

@@ -0,0 +1,3 @@
+export declare const root: string;
+export declare const text: string;
+//# sourceMappingURL=EditableText.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableText.css.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC"}

package/dist/components/EditableText/EditableText.css.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/EditableText/EditableText.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+export const root = style({
+  transitionDelay: '0s',
+  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
+  transitionDuration: '0.2s',
+  transitionProperty: 'box-shadow',
+  boxShadow: "inset 0 -1px 0 0 ".concat(vars.typography.colour.muted)
+}, "root");
+export const text = style({
+  cursor: 'pointer'
+}, "text");
+__vanilla_filescope__.endFileScope();

package/dist/components/EditableText/EditableText.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ComponentProps, InputHTMLAttributes } from 'react';
+import { Text } from '../Text';
+type BoxProps = Pick<ComponentProps<typeof Text>, 'display'>;
+type TextProps = Pick<ComponentProps<typeof Text>, 'is' | 'colour' | 'size' | 'display' | 'children' | 'noWrap'>;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'is' | 'autoFocus' | 'width' | 'height' | keyof TextProps | keyof BoxProps>;
+export interface Props extends TextProps, InputProps, BoxProps {
+    className?: string;
+}
+export declare const EditableText: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
+export default EditableText;
+//# sourceMappingURL=EditableText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAc,mBAAmB,EAAY,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAI9C,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7D,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;AACjH,KAAK,UAAU,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACpC,OAAO,GAAG,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,SAAS,GAAG,MAAM,QAAQ,CACrF,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,UAAU,EAAE,QAAQ;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,iFA6DxB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/EditableText/EditableText.js

@@ -0,0 +1,69 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["is", "colour", "size", "display", "value"];
+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 clsx from 'clsx';
+import * as React from 'react';
+import { forwardRef, useState } from 'react';
+import { Box } from "../Box/index.js";
+import { Text, useTextStyles } from "../Text/index.js";
+import * as inputStyles from "../private/InputBase/withEnhancedInput.css.js";
+import * as styles from "./EditableText.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const EditableText = forwardRef((_ref, ref) => {
+  let {
+      is,
+      colour = 'muted',
+      size,
+      display = 'inlineBlock',
+      value
+    } = _ref,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  const [isEditing, setIsEditing] = useState(false);
+  const onRequestEdit = () => setIsEditing(true);
+  const textStyles = useTextStyles({
+    is,
+    colour,
+    size
+  });
+  const width = value ? "".concat(value.toString().length, "ch") : void 0;
+  return _jsx(Box, {
+    ref: ref,
+    display: display,
+    className: styles.root,
+    style: {
+      maxWidth: width
+    },
+    onClick: onRequestEdit,
+    onFocus: onRequestEdit,
+    onBlur: () => setIsEditing(false),
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === 'Escape') {
+        setIsEditing(false);
+      }
+    },
+    children: isEditing ? _jsx(Box, _objectSpread(_objectSpread({
+      is: "input"
+    }, inputProps), {}, {
+      autoFocus: true,
+      value: value,
+      className: clsx(textStyles, inputStyles.input.itself.root),
+      style: {
+        width
+      }
+    })) : _jsx(Text, {
+      noWrap: true,
+      is: is,
+      colour: colour,
+      className: clsx(textStyles, styles.text),
+      style: {
+        maxWidth: width
+      },
+      children: value
+    })
+  });
+});
+export default EditableText;

package/dist/components/EditableText/index.d.ts

@@ -0,0 +1,2 @@
+export { EditableText } from './EditableText';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/EditableText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/EditableText/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { EditableText } from "./EditableText.js";

package/dist/components/EditableText/stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+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 isChromatic from 'chromatic';
+import * as React from 'react';
+import { EditableText } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Components/Inputs/EditableText',
+  component: EditableText,
+  argTypes: {
+    colour: {
+      options: ['muted', 'primary', 'secondary'],
+      defaultValue: 'primary',
+      control: {
+        type: 'select'
+      }
+    }
+  }
+};
+const template = args => _jsx(EditableText, _objectSpread({}, args));
+const textProps = {
+  colour: 'muted',
+  value: 'Hello World',
+  type: 'text'
+};
+const numberProps = {
+  colour: 'muted',
+  value: '20',
+  type: 'number'
+};
+const formatDate = function () {
+  let date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Date();
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  return "".concat(year, "-").concat(month, "-").concat(day);
+};
+const todayStr = formatDate(isChromatic() ? new Date(2019, 5, 1) : new Date());
+const dateProps = {
+  colour: 'muted',
+  value: todayStr,
+  type: 'date'
+};
+export const text = template.bind(textProps);
+export const number = template.bind(numberProps);
+export const date = template.bind(dateProps);
+text.args = textProps;
+number.args = numberProps;
+date.args = dateProps;

package/dist/components/Text/Text.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from 'react';
+import type { FunctionComponent, ReactNode, CSSProperties } from 'react';
 import type { BoxStyleProps } from '../Box';
 import { TextStyleProps } from './useTextStyles';
 export interface Props extends TextStyleProps {
@@ -7,6 +7,7 @@ export interface Props extends TextStyleProps {
     strong?: boolean;
     children?: ReactNode;
     display?: Extract<BoxStyleProps['display'], 'inline' | 'inlineBlock' | 'block'>;
+    style?: CSSProperties;
 }
 export declare const Text: FunctionComponent<Props>;
 export default Text;

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAiB,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,KAAM,SAAQ,cAAc;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAChB,aAAa,CAAC,SAAS,CAAC,EACxB,QAAQ,GAAG,aAAa,GAAG,OAAO,CAClC,CAAC;CACF;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAiCzC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAiB,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,KAAM,SAAQ,cAAc;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAChB,aAAa,CAAC,SAAS,CAAC,EACxB,QAAQ,GAAG,aAAa,GAAG,OAAO,CAClC,CAAC;IACF,KAAK,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAmCzC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Text/Text.js

@@ -17,7 +17,8 @@ export const Text = _ref => {
     breakWord,
     noWrap,
     size = '4',
-    strong = false
+    strong = false,
+    style
   } = _ref;
   return _jsx(Box, {
     is: Component,
@@ -32,6 +33,7 @@ export const Text = _ref => {
       noWrap,
       breakWord
     }), className],
+    style: style,
     children: children
   });
 };

package/package.json

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