@planningcenter/doxy-web - npm Package Compare versions

Comparing version 2.3.0 to 2.3.1-rc.9

dist/components/Alert/Alert.d.ts

@@ -6,4 +6,3 @@ import React from "react";
     theme?: "default" | "info" | "success" | "warning" | "error";
-    variant?: "default" | "quiet" | "loud";
 }
-export declare const Alert: ({ size, text, theme, variant, }: AlertProps) => React.JSX.Element;
+export declare const Alert: ({ size, text, theme, }: AlertProps) => React.JSX.Element;

dist/components/Select/Select.d.ts

@@ -1,15 +0,33 @@
-import React from "react";
+import React, { ReactElement } from "react";
+interface OptionProps {
+    disabled?: boolean;
+    hidden?: boolean;
+    label: string;
+    value: string;
+}
+declare const Option: ({ disabled, hidden, label, value, }: OptionProps) => React.JSX.Element;
+interface OptGroupProps {
+    children: ReactElement<typeof Option> | ReactElement<typeof Option>[];
+    disabled?: boolean;
+    label: string;
+}
+declare const OptGroup: ({ children, disabled, label }: OptGroupProps) => React.JSX.Element;
 export interface SelectProps {
+    ariaLabel?: string;
+    children: ReactElement<typeof Option> | ReactElement<typeof Option>[] | ReactElement<typeof OptGroup> | ReactElement<typeof OptGroup>[];
     disabled?: boolean;
     id: string;
     label?: string;
-    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-    options: {
-        label: string;
-        value: string;
-        disabled?: boolean;
-    }[];
+    name?: string;
+    onBlur?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    required?: boolean;
     size?: "md" | "sm";
-    value?: string;
+    value: string;
 }
-export declare const Select: ({ disabled, id, label, onChange, options, size, value, }: SelectProps) => React.JSX.Element;
+declare const Select: {
+    ({ ariaLabel, children, disabled, id, label, name, onBlur, onChange, required, size, value, }: SelectProps): React.JSX.Element;
+    Option: ({ disabled, hidden, label, value, }: OptionProps) => React.JSX.Element;
+    OptGroup: ({ children, disabled, label }: OptGroupProps) => React.JSX.Element;
+};
+export { Select };

dist/index.es.js

@@ -8,7 +8,6 @@ import React, { useRef, useEffect, useState, forwardRef } from 'react';
     text,
-    theme = "default",
-    variant = "default"
+    theme = "default"
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames("alert", `${size}-alert`, `${theme}-alert`, `${variant}-alert`),
+    className: classnames("alert", `${size}-alert`, `${theme}-alert`),
     role: "alert"
@@ -334,3 +333,3 @@ }, text);
   }, /*#__PURE__*/React.createElement("button", {
-    "aria-label": "decrement input value",
+    "aria-label": "decrease quantity",
     className: "number-spinner__btn number-spinner__btn-decrement",
@@ -343,2 +342,3 @@ disabled: disabled || value === min,
   }, /*#__PURE__*/React.createElement("span", null, "-")), /*#__PURE__*/React.createElement("input", {
+    "aria-label": "quantity",
     className: "number-spinner__input",
@@ -359,3 +359,3 @@ disabled: disabled,
   }), /*#__PURE__*/React.createElement("button", {
-    "aria-label": "increment input value",
+    "aria-label": "increase quantity",
     className: "number-spinner__btn number-spinner__btn-increment",
@@ -370,33 +370,59 @@ disabled: disabled || value === max,
 
-const Select = _ref => {
+const Option = _ref => {
   let {
     disabled = false,
+    hidden = false,
+    label,
+    value
+  } = _ref;
+  return /*#__PURE__*/React.createElement("option", {
+    key: label,
+    disabled: disabled,
+    hidden: hidden,
+    value: value
+  }, label);
+};
+const OptGroup = _ref2 => {
+  let {
+    children,
+    disabled = false,
+    label
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("optgroup", {
+    label: label,
+    disabled: disabled
+  }, children);
+};
+const Select = _ref3 => {
+  let {
+    ariaLabel = undefined,
+    children,
+    disabled = false,
     id,
     label = "",
+    name = undefined,
+    onBlur = undefined,
     onChange,
-    options = [],
+    required = false,
     size = "md",
     value
-  } = _ref;
+  } = _ref3;
   return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("label", {
     htmlFor: id
-  }, label), /*#__PURE__*/React.createElement("select", {
+  }, label, required ? /*#__PURE__*/React.createElement("span", {
+    className: "c-ruby ml-4p"
+  }, "*") : null), /*#__PURE__*/React.createElement("select", {
+    "aria-label": ariaLabel,
+    className: classnames("select", `${size}-select`),
+    disabled: disabled,
     id: id,
-    className: classnames("select", size === "sm" && "small-select"),
-    disabled: disabled,
-    onChange: e => typeof onChange === "function" && onChange(e),
+    name: name,
+    onBlur: e => onBlur && onBlur(e),
+    onChange: e => onChange(e),
+    required: required,
     value: value
-  }, options.map(_ref2 => {
-    let {
-      label,
-      value,
-      disabled
-    } = _ref2;
-    return /*#__PURE__*/React.createElement("option", {
-      key: label,
-      value: value,
-      disabled: disabled
-    }, label);
-  })));
+  }, children));
 };
+Select.Option = Option;
+Select.OptGroup = OptGroup;
 
@@ -406,3 +432,3 @@ const getColorClasses = color => `c-${color}`;
   let {
-    color = "tint3",
+    color = "tint1",
     level,
@@ -409,0 +435,0 @@ text

dist/index.js

@@ -17,7 +17,6 @@ 'use strict';
     text,
-    theme = "default",
-    variant = "default"
+    theme = "default"
   } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("alert", `${size}-alert`, `${theme}-alert`, `${variant}-alert`),
+    className: classnames__default["default"]("alert", `${size}-alert`, `${theme}-alert`),
     role: "alert"
@@ -343,3 +342,3 @@ }, text);
   }, /*#__PURE__*/React__default["default"].createElement("button", {
-    "aria-label": "decrement input value",
+    "aria-label": "decrease quantity",
     className: "number-spinner__btn number-spinner__btn-decrement",
@@ -352,2 +351,3 @@ disabled: disabled || value === min,
   }, /*#__PURE__*/React__default["default"].createElement("span", null, "-")), /*#__PURE__*/React__default["default"].createElement("input", {
+    "aria-label": "quantity",
     className: "number-spinner__input",
@@ -368,3 +368,3 @@ disabled: disabled,
   }), /*#__PURE__*/React__default["default"].createElement("button", {
-    "aria-label": "increment input value",
+    "aria-label": "increase quantity",
     className: "number-spinner__btn number-spinner__btn-increment",
@@ -379,33 +379,59 @@ disabled: disabled || value === max,
 
-const Select = _ref => {
+const Option = _ref => {
   let {
     disabled = false,
+    hidden = false,
+    label,
+    value
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("option", {
+    key: label,
+    disabled: disabled,
+    hidden: hidden,
+    value: value
+  }, label);
+};
+const OptGroup = _ref2 => {
+  let {
+    children,
+    disabled = false,
+    label
+  } = _ref2;
+  return /*#__PURE__*/React__default["default"].createElement("optgroup", {
+    label: label,
+    disabled: disabled
+  }, children);
+};
+const Select = _ref3 => {
+  let {
+    ariaLabel = undefined,
+    children,
+    disabled = false,
     id,
     label = "",
+    name = undefined,
+    onBlur = undefined,
     onChange,
-    options = [],
+    required = false,
     size = "md",
     value
-  } = _ref;
+  } = _ref3;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label && /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id
-  }, label), /*#__PURE__*/React__default["default"].createElement("select", {
+  }, label, required ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "c-ruby ml-4p"
+  }, "*") : null), /*#__PURE__*/React__default["default"].createElement("select", {
+    "aria-label": ariaLabel,
+    className: classnames__default["default"]("select", `${size}-select`),
+    disabled: disabled,
     id: id,
-    className: classnames__default["default"]("select", size === "sm" && "small-select"),
-    disabled: disabled,
-    onChange: e => typeof onChange === "function" && onChange(e),
+    name: name,
+    onBlur: e => onBlur && onBlur(e),
+    onChange: e => onChange(e),
+    required: required,
     value: value
-  }, options.map(_ref2 => {
-    let {
-      label,
-      value,
-      disabled
-    } = _ref2;
-    return /*#__PURE__*/React__default["default"].createElement("option", {
-      key: label,
-      value: value,
-      disabled: disabled
-    }, label);
-  })));
+  }, children));
 };
+Select.Option = Option;
+Select.OptGroup = OptGroup;
 
@@ -415,3 +441,3 @@ const getColorClasses = color => `c-${color}`;
   let {
-    color = "tint3",
+    color = "tint1",
     level,
@@ -418,0 +444,0 @@ text

package.json

 {
   "name": "@planningcenter/doxy-web",
-  "version": "2.3.0",
+  "version": "2.3.1-rc.9",
   "description": "Doxy for Church Center Web",
@@ -51,14 +51,14 @@ "main": "dist/index.js",
     "@rollup/plugin-typescript": "^9.0.2",
-    "@storybook/addon-actions": "^7.3.2",
-    "@storybook/addon-docs": "^7.3.2",
-    "@storybook/addon-essentials": "^7.3.2",
-    "@storybook/addon-interactions": "^7.3.2",
-    "@storybook/addon-links": "^7.3.2",
-    "@storybook/addon-mdx-gfm": "^7.3.2",
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-docs": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-mdx-gfm": "^7.4.0",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addons": "^7.3.2",
-    "@storybook/client-api": "^7.3.2",
-    "@storybook/react": "^7.3.2",
-    "@storybook/react-webpack5": "^7.3.2",
+    "@storybook/addons": "^7.4.0",
+    "@storybook/client-api": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
     "@storybook/testing-library": "^0.2.0",
@@ -99,3 +99,3 @@ "@testing-library/dom": "^8.19.0",
     "sass-loader": "^13.2.2",
-    "storybook": "^7.3.2",
+    "storybook": "^7.4.0",
     "storybook-dark-mode": "^3.0.1",
@@ -102,0 +102,0 @@ "tailwindcss": "^3.2.4",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

603761

increased by1.73%

Number of package files

42

increased by5%

Lines of code

11816

increased by0.88%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes