@autoguru/overdrive 4.9.9 → 4.10.0

package/dist/components/Box/argTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"argTypes.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/argTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAWrD,CAAC;AAgCF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CA2DrE,CAAC"}
+{"version":3,"file":"argTypes.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/argTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAWrD,CAAC;AAmCF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CA2DrE,CAAC"}

package/dist/components/Box/argTypes.js

@@ -39,7 +39,10 @@ const borderRadiusOptions = [
     'full',
     'pill',
 ];
-const widthOptions = ['full', 'none'];
+const widthOptions = [
+    'full',
+    'none',
+];
 export const boxArgTypes = {
     boxShadow: {
         options: boxShadowOptions,

package/dist/components/Box/useBoxStyles.css.js

@@ -43,7 +43,7 @@ export const width = styleVariants({
     },
     none: {
         width: void 0,
-    }
+    },
 });
 export const height = styleVariants({
     full: {

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

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import { Tokens } from '../../themes/tokens';
+declare type Colours = keyof Tokens['colours']['intent'];
+export declare const colours: Record<Colours, ReturnType<typeof style>>;
+export declare const size: {
+    horizontal: Record<never, string>;
+    vertical: Record<never, string>;
+};
+export {};
+//# sourceMappingURL=DividerLine.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DividerLine.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DividerLine/DividerLine.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAiB,MAAM,sBAAsB,CAAC;AAG5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,aAAK,OAAO,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC;AACjD,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,CAyB7D,CAAC;AAIF,eAAO,MAAM,IAAI;;;CAiBhB,CAAC"}

package/dist/components/DividerLine/DividerLine.css.js

@@ -0,0 +1,43 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { themeContractVars as vars } from '../../themes/theme.css';
+export const colours = {
+    primary: style({
+        backgroundColor: vars.colours.intent.primary.background.standard,
+    }),
+    secondary: style({
+        backgroundColor: vars.colours.intent.secondary.background.standard,
+    }),
+    danger: style({
+        backgroundColor: vars.colours.intent.danger.background.standard,
+    }),
+    information: style({
+        backgroundColor: vars.colours.intent.information.background.standard,
+    }),
+    warning: style({
+        backgroundColor: vars.colours.intent.warning.background.standard,
+    }),
+    success: style({
+        backgroundColor: vars.colours.intent.success.background.standard,
+    }),
+    neutral: style({
+        backgroundColor: vars.colours.intent.neutral.background.mild,
+    }),
+    shine: style({
+        backgroundColor: vars.colours.intent.shine.foreground,
+    }),
+};
+const sizes = [1, 2, 3];
+export const size = {
+    horizontal: styleVariants(sizes.reduce((sizes, size) => {
+        sizes[size] = {
+            height: size,
+        };
+        return sizes;
+    }, {})),
+    vertical: styleVariants(sizes.reduce((sizes, size) => {
+        sizes[size] = {
+            width: size,
+        };
+        return sizes;
+    }, {})),
+};

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

@@ -0,0 +1,13 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { Box } from '../';
+import * as styles from './DividerLine.css';
+interface Props {
+    isVertical?: boolean;
+    className?: string;
+    space: ComponentProps<typeof Box>['marginY'];
+    colour?: keyof typeof styles.colours;
+    size?: keyof typeof styles.size['horizontal'];
+}
+export declare const DividerLine: FunctionComponent<Props>;
+export {};
+//# sourceMappingURL=DividerLine.d.ts.map

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

@@ -0,0 +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;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,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAehD,CAAC"}

package/dist/components/DividerLine/DividerLine.js

@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import * as React from 'react';
+import { Box } from '../';
+import * as styles from './DividerLine.css';
+export const DividerLine = ({ className = '', isVertical = false, space = '3', colour = 'primary', size = 1, }) => (React.createElement(Box, { className: clsx(className, styles.colours[colour], {
+        [styles.size.horizontal[size]]: !isVertical,
+        [styles.size.vertical[size]]: isVertical,
+    }), marginY: isVertical ? void 0 : space, marginX: isVertical ? space : void 0 }));

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

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

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

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

package/dist/components/DividerLine/index.js

@@ -0,0 +1 @@
+export { DividerLine } from './DividerLine';

package/dist/components/DividerLine/stories.js

@@ -0,0 +1,126 @@
+"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 * as React from 'react';
+import { Box } from "../Box/index.js";
+import { Heading } from "../Heading/index.js";
+import { Inline } from "../Inline/index.js";
+import { DividerLine } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const spacingOptions = {
+  none: 'none',
+  1: '1',
+  2: '2',
+  3: '3',
+  4: '4',
+  5: '5',
+  6: '6',
+  7: '7',
+  8: '8',
+  9: '9'
+};
+const sizeOptions = [1, 2, 3];
+const colours = ['primary', 'secondary', 'danger', 'information', 'warning', 'success', 'neutral', 'shine'];
+export default {
+  title: 'Components/DividerLine',
+  component: DividerLine,
+  argTypes: {
+    space: {
+      options: spacingOptions,
+      defaultValue: 1,
+      control: {
+        type: 'select'
+      }
+    },
+    colour: {
+      options: colours,
+      defaultValue: 1,
+      control: {
+        type: 'select'
+      }
+    },
+    size: {
+      options: sizeOptions,
+      defaultValue: 1,
+      control: {
+        type: 'select'
+      }
+    }
+  },
+  decorators: [story => _jsx("div", {
+    style: {
+      display: 'grid',
+      gridAutoFlow: 'row dense',
+      gridGap: '10px'
+    },
+    children: _jsx("div", {
+      style: {
+        display: 'grid',
+        gap: '10px',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(10px, max-content))'
+      },
+      children: story()
+    })
+  })]
+};
+
+const template = args => _jsxs(Box, {
+  children: [_jsx(Heading, {
+    is: "h2",
+    size: "7",
+    children: "Title 1"
+  }), _jsx(DividerLine, _objectSpread({}, args)), _jsx(Heading, {
+    is: "h2",
+    size: "7",
+    children: "Title 1"
+  })]
+});
+
+const verticalTemplate = args => _jsxs(Inline, {
+  alignY: "stretch",
+  children: [_jsx(Heading, {
+    is: "h2",
+    size: "7",
+    children: "Title 1"
+  }), _jsx(DividerLine, _objectSpread({}, args)), _jsx(Heading, {
+    is: "h2",
+    size: "7",
+    children: "Title 1"
+  })]
+});
+
+const templateAllColours = args => _jsx(Box, {
+  children: colours.map(colour => _jsxs(_Fragment, {
+    children: [_jsx(Heading, {
+      is: "h2",
+      size: "7",
+      children: "Title"
+    }), _jsx(DividerLine, _objectSpread(_objectSpread({}, args), {}, {
+      colour: colour
+    }))]
+  }))
+});
+
+const standardProps = {
+  space: '5',
+  size: 3,
+  colour: 'primary'
+};
+export const standard = template.bind(standardProps);
+standard.args = standardProps;
+
+const verticalProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  isVertical: true
+});
+
+export const vertical = verticalTemplate.bind(verticalProps);
+vertical.args = verticalProps;
+export const standardAllColours = templateAllColours.bind(standardProps);
+standardAllColours.args = standardProps;

package/dist/components/index.d.ts

@@ -53,4 +53,5 @@ export * from './Image';
 export * from './NumberBubble';
 export * from './TextBubble';
 export * from './ColourInput';
+export * from './DividerLine';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/dist/components/index.js

@@ -53,3 +53,4 @@ export * from './Image';
 export * from './NumberBubble';
 export * from './TextBubble';
 export * from './ColourInput';
+export * from './DividerLine';

package/package.json

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