@7shifts/sous-chef 1.4.0 → 1.5.2

package/CHANGELOG.md

@@ -1,6 +1,39 @@
-## 1.3.2 (October 7th, 2021)
+## 1.5.2 (November 10th, 2021)
 
-### Added disabled options
+### Enhancements
+
+-   PasswordField: Updated met criteria bullet to IconCheck to be consistent with mobile ([#69](https://github.com/7shifts/sous-chef/pull/69))
+
+### New Components
+
+- IconCheck: added for now to use in PasswordCriteria. ([#69](https://github.com/7shifts/sous-chef/pull/69))
+
+## 1.5.1 (October 20th, 2021)
+
+### Bug fixes
+
+-   DataTable: Exported `DataTableCustomComponent` type ([#67](https://github.com/7shifts/sous-chef/pull/67))
+
+## 1.5.0 (October 19th, 2021)
+
+### New components
+
+-   PillSelectField ([#65](https://github.com/7shifts/sous-chef/pull/65))
+
+### Bug fixes
+
+-   Field: Updated to align properly when using FormRow with only one form field with with label ([#66](https://github.com/7shifts/sous-chef/pull/66))
+
+## 1.4.1 (October 8th, 2021)
+
+### Enhancements
+
+-   DataTable: Updated flow types ([#62](https://github.com/7shifts/sous-chef/pull/62))
+-   Tooltip: Added the prop `onClose` to listen when the overlay closed ([#64](https://github.com/7shifts/sous-chef/pull/64))
+
+## 1.4.0 (October 7th, 2021)
+
+### Enhancements
 
 -   Updated SelectField to support disabled options
 

package/dist/core/DataTable/types.js.flow

@@ -12,6 +12,7 @@ export type Column = {
     size?: number,
     isSortable?: boolean,
     currentSort?: SortDirection,
+    isRightAligned?: boolean
 };
 export type SortDirection = 'asc' | 'desc' | null;
 export type Sort = {

package/dist/core/ResourceTable/types.js.flow

@@ -12,20 +12,21 @@ export type Column = {
     size?: number,
     isSortable?: boolean,
     currentSort?: SortDirection,
+    isRightAligned?: boolean
 };
 export type SortDirection = 'asc' | 'desc' | null;
 export type Sort = {
     columnName: string,
-    direction: SortDirection,
+    direction: SortDirection
 };
 export type Item<T> = T | (T & { actions?: Action[] });
 export type CustomComponent<T> = {
     item: Item<T>,
     index: number,
     columnSizes?: number[],
-    columns?: Column[],
+    columns?: Column[]
 };
 export type Action = {
     label: React$Node,
-    onAction: () => void,
+    onAction: () => void
 };

package/dist/core/index.d.ts

@@ -9,4 +9,4 @@ import DataTableEditableCell from './DataTableEditableCell';
 export { ResourceTable, ResourceTableRow, Inline, Stack, DataTable, DataTableRow, DataTableCell, DataTableEditableCell };
 export type { AlignItems, FlexWrap, JustifyContent } from './Flex/types';
 export type { CustomComponent, Column, SortDirection, Sort, Action } from './ResourceTable/types';
-export type { Column as DataTableColumn } from './DataTable/types';
+export type { Column as DataTableColumn, CustomComponent as DataTableCustomComponent } from './DataTable/types';

package/dist/core/index.js.flow

@@ -5,25 +5,35 @@
  * @flow
  */
 
-import ResourceTable from "./ResourceTable";
-import ResourceTableRow from "./ResourceTableRow";
-import Inline from "./Inline";
-import Stack from "./Stack";
-import DataTable from "./DataTable"
-import DataTableRow from "./DataTableRow";
-import DataTableCell from "./DataTableCell";
-import DataTableEditableCell from "./DataTableEditableCell";
+import ResourceTable from './ResourceTable';
+import ResourceTableRow from './ResourceTableRow';
+import Inline from './Inline';
+import Stack from './Stack';
+import DataTable from './DataTable';
+import DataTableRow from './DataTableRow';
+import DataTableCell from './DataTableCell';
+import DataTableEditableCell from './DataTableEditableCell';
 
-declare export { ResourceTable, ResourceTableRow, Inline, Stack, DataTable, DataTableRow, DataTableCell, DataTableEditableCell };
-export type { AlignItems, FlexWrap, JustifyContent } from "./Flex/types";
+declare export {
+    ResourceTable,
+    ResourceTableRow,
+    Inline,
+    Stack,
+    DataTable,
+    DataTableRow,
+    DataTableCell,
+    DataTableEditableCell
+};
+export type { AlignItems, FlexWrap, JustifyContent } from './Flex/types';
 export type {
-  CustomComponent,
-  Column,
-  SortDirection,
-  Sort,
-  Action,
-} from "./ResourceTable/types";
+    CustomComponent,
+    Column,
+    SortDirection,
+    Sort,
+    Action
+} from './ResourceTable/types';
 
 export type {
-  Column as DataTableColumn
-} from "./DataTable/types";
+    Column as DataTableColumn,
+    CustomComponent as DataTableCustomComponent
+} from './DataTable/types';

package/dist/forms/DatePickerField/DatePickerField.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+declare type Props = {
+    name: string;
+    /** If not provided it will generate a random id so the label links properly with the text input */
+    id?: string;
+    value?: Date;
+    disabledDays?: (day: Date) => boolean;
+    /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
+    format?: string;
+    initialMonth?: Date;
+    onChange?: (e: Date) => void;
+    onBlur?: () => void;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    defaultValue?: Date;
+    readOnly?: boolean;
+};
+/** DatePickerField form element. */
+declare const DatePickerField: React.FC<Props>;
+export default DatePickerField;

package/dist/forms/DatePickerField/DatePickerField.js.flow

@@ -0,0 +1,35 @@
+/**
+ * Flowtype definitions for DatePickerField
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+import * as React from 'react';
+declare type Props = {
+    name: string,
+
+    /**
+     * If not provided it will generate a random id so the label links properly with the text input
+     */
+    id?: string,
+    value?: Date,
+    disabledDays?: (day: Date) => boolean,
+
+    /**
+     * Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format
+     */
+    format?: string,
+    initialMonth?: Date,
+    onChange?: (e: Date) => void,
+    onBlur?: () => void,
+    label?: React$Node,
+    caption?: React$Node,
+    error?: string,
+    placeholder?: string,
+    disabled?: boolean,
+    defaultValue?: Date,
+    readOnly?: boolean,
+};
+declare var DatePickerField: (props: Props) => React$Node;
+declare export default typeof DatePickerField;

package/dist/forms/DatePickerField/index.d.ts

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

package/dist/forms/DatePickerField/index.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+declare export { default } from "./DatePickerField";

package/dist/forms/PillSelectField/PillSelectField.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SelectOption } from '../SelectField/types';
+declare type Props<T> = {
+    name: string;
+    /** If not provided it will generate a random id so the label links properly with the pill select input */
+    id?: string;
+    value?: SelectOption<T>[];
+    options: SelectOption<T>[];
+    onChange?: (e: SelectOption<T>[]) => void;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: string;
+    disabled?: boolean;
+};
+/** PillSelectField form element. */
+declare const PillSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, label, caption, error, disabled }: Props<T>) => JSX.Element;
+export default PillSelectField;

package/dist/forms/PillSelectField/PillSelectField.js.flow

@@ -0,0 +1,26 @@
+/**
+ * Flowtype definitions for PillSelectField
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+import * as React from 'react';
+import type { SelectOption } from '../SelectField/types';
+declare type Props<T> = {
+    name: string,
+
+    /**
+     * If not provided it will generate a random id so the label links properly with the text input
+     */
+    id?: string,
+    value?: SelectOption<T>[],
+    options: SelectOption<T>[],
+    onChange?: (e: SelectOption<T>[]) => void,
+    label?: React$Node,
+    caption?: React$Node,
+    error?: string,
+    disabled?: boolean
+};
+declare var PillSelectField: <T>(props: Props<T>) => React$Node;
+declare export default typeof PillSelectField;

package/dist/forms/PillSelectField/index.d.ts

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

package/dist/forms/PillSelectField/index.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+declare export { default } from './PillSelectField';

package/dist/forms/WeekPickerField/WeekPickerField.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { WeekStart } from '../../utils/date';
+declare type Props = {
+    name: string;
+    /** If not provided it will generate a random id so the label links properly with the text input */
+    id?: string;
+    value?: Date;
+    disabledDays?: (day: Date) => boolean;
+    /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
+    format?: string;
+    initialMonth?: Date;
+    onChange?: (e: Date) => void;
+    onBlur?: () => void;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    defaultValue?: Date;
+    readOnly?: boolean;
+    weekStart?: WeekStart;
+};
+/** WeekPickerField form element. */
+declare const WeekPickerField: React.FC<Props>;
+export default WeekPickerField;

package/dist/forms/WeekPickerField/WeekPickerField.js.flow

@@ -0,0 +1,35 @@
+/**
+ * Flowtype definitions for DatePickerField
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+import * as React from 'react';
+declare type Props = {
+    name: string,
+
+    /**
+     * If not provided it will generate a random id so the label links properly with the text input
+     */
+    id?: string,
+    value?: Date,
+    disabledDays?: (day: Date) => boolean,
+
+    /**
+     * Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format
+     */
+    format?: string,
+    initialMonth?: Date,
+    onChange?: (e: Date) => void,
+    onBlur?: () => void,
+    label?: React$Node,
+    caption?: React$Node,
+    error?: string,
+    placeholder?: string,
+    disabled?: boolean,
+    defaultValue?: Date,
+    readOnly?: boolean,
+};
+declare var WeekPickerField: (props: Props) => React$Node;
+declare export default typeof WeekPickerField;

package/dist/forms/WeekPickerField/index.d.ts

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

package/dist/forms/WeekPickerField/index.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+declare export { default } from './WeekPickerField';

package/dist/forms/index.d.ts

@@ -3,6 +3,7 @@ import FormRow, { SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PER
 import TextAreaField from './TextAreaField';
 import TextField from './TextField';
 import CheckboxField from './CheckboxField';
+import PillSelectField from './PillSelectField';
 import RadioGroupField from './RadioGroupField';
 import RadioGroupOption from './RadioGroupOption';
 import PasswordField from './PasswordField';
@@ -11,7 +12,7 @@ import SelectField from './SelectField';
 import DateField from './DateField';
 import DateRangeField from './DateRangeField';
 import WeekField from './WeekField';
-export { Form, FormRow, TextAreaField, TextField, CheckboxField, RadioGroupField, RadioGroupOption, PasswordField, MultiSelectField, SelectField, DateField, DateRangeField, WeekField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
+export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, RadioGroupField, RadioGroupOption, PasswordField, MultiSelectField, SelectField, DateField, DateRangeField, WeekField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
 export type { PasswordCriteria } from './PasswordField/types';
 export type { SelectOption, SelectOptions } from './SelectField/types';
 export type { FormikType } from './Form/types';

package/dist/forms/index.js.flow

@@ -11,11 +11,12 @@ import FormRow, {
     SIZE_33_PERCENT,
     SIZE_50_PERCENT,
     SIZE_66_PERCENT,
-    SIZE_75_PERCENT,
+    SIZE_75_PERCENT
 } from './FormRow';
 import TextAreaField from './TextAreaField';
 import TextField from './TextField';
 import CheckboxField from './CheckboxField';
+import PillSelectField from './PillSelectField';
 import RadioGroupField from './RadioGroupField';
 import RadioGroupOption from './RadioGroupOption';
 import PasswordField from './PasswordField';
@@ -30,6 +31,7 @@ declare export {
     TextAreaField,
     TextField,
     CheckboxField,
+    PillSelectField,
     RadioGroupField,
     RadioGroupOption,
     PasswordField,
@@ -42,13 +44,13 @@ declare export {
     SIZE_33_PERCENT,
     SIZE_50_PERCENT,
     SIZE_66_PERCENT,
-    SIZE_75_PERCENT,
+    SIZE_75_PERCENT
 };
 export type { PasswordCriteria } from './PasswordField/types';
 export type {
     SelectOption,
     SelectOptions,
     CustomOptionProps,
-    SelectedOptionPrefixProps,
+    SelectedOptionPrefixProps
 } from './SelectField/types';
 export type { FormikType } from './Form/types';

package/dist/icons/IconCheck.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Color } from '../foundation/colors';
+import { IconSize } from './types';
+declare type Props = {
+    size?: IconSize;
+    color?: Color;
+};
+declare const IconCheck: React.FC<Props>;
+export default IconCheck;

package/dist/icons/IconCheck.js.flow

@@ -0,0 +1,17 @@
+/**
+ * Flowtype definitions for Button
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+ import * as React from 'react';
+ import type { Color } from '../foundation/colors';
+ import type { IconSize } from '../types';
+ 
+ declare type Props = {
+     size?: IconSize,
+     color?: Color,
+ };
+ declare var IconCheck: (props: Props) => React$Node;
+ declare export default typeof IconCheck;

package/dist/icons/IconUser.flow

@@ -0,0 +1,17 @@
+/**
+ * Flowtype definitions for Button
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+import * as React from 'react';
+import type { Color } from '../foundation/colors';
+import type { IconSize } from '../types';
+
+declare type Props = {
+    size?: IconSize,
+    color?: Color
+};
+declare var IconUser: (props: Props) => React$Node;
+declare export default typeof IconEdit;

package/dist/icons/index.d.ts

@@ -3,6 +3,7 @@ import IconArrowLeft from './IconArrowLeft';
 import IconArrowRight from './IconArrowRight';
 import IconArrowUp from './IconArrowUp';
 import IconCalendar from './IconCalendar';
+import IconCheck from './IconCheck';
 import IconChevronDown from './IconChevronDown';
 import IconChevronUp from './IconChevronUp';
 import IconClose from './IconClose';
@@ -18,4 +19,4 @@ import IconMore from './IconMore';
 import IconRemove from './IconRemove';
 import IconUser from './IconUser';
 import IconUserPlus from './IconUserPlus';
-export { IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconCalendar, IconChevronDown, IconChevronUp, IconClose, IconComment, IconDelete, IconEdit, IconEye, IconEyeSlash, IconExclaim, IconLocation, IconMinusCircle, IconMore, IconRemove, IconUser, IconUserPlus };
+export { IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconCalendar, IconCheck, IconChevronDown, IconChevronUp, IconClose, IconComment, IconDelete, IconEdit, IconEye, IconEyeSlash, IconExclaim, IconLocation, IconMinusCircle, IconMore, IconRemove, IconUser, IconUserPlus };

package/dist/icons/index.js.flow

@@ -10,6 +10,7 @@ import IconArrowLeft from './IconArrowLeft';
 import IconArrowRight from './IconArrowRight';
 import IconArrowUp from './IconArrowUp';
 import IconCalendar from './IconCalendar';
+import IconCheck from './IconCheck';
 import IconChevronDown from './IconChevronDown';
 import IconChevronUp from './IconChevronUp';
 import IconComment from './IconComment';
@@ -31,6 +32,7 @@ declare export {
     IconArrowRight,
     IconArrowUp,
     IconCalendar,
+    IconCheck,
     IconChevronDown,
     IconChevronUp,
     IconComment,

package/dist/index.css

@@ -765,7 +765,8 @@ Please ask a designer if you have questions about which colours to use.
   color: #555;
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
-  font-size: 14px; }
+  font-size: 14px;
+  min-height: 16px; }
 
 /*********************************
 For new colours, see _colors.scss.
@@ -1071,6 +1072,74 @@ Please ask a designer if you have questions about which colours to use.
     border: solid #9f9f9f !important;
     border-width: 0 2px 2px 0 !important; }
 
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
+Please ask a designer if you have questions about which colours to use.
+*/
+._g6T-p {
+  position: relative; }
+  ._g6T-p input {
+    position: absolute;
+    opacity: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    right: 0;
+    box-sizing: border-box; }
+    ._g6T-p input:hover:not(:disabled) {
+      cursor: pointer; }
+  ._1i2AX {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 8px;
+    border: 1px solid #e0e0e0;
+    border-radius: 25px;
+    min-height: 38px;
+    min-width: 60px;
+    text-align: center;
+    vertical-align: middle;
+    color: #555;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    transition: background-color 0.2s, color 0.2s;
+    text-transform: capitalize;
+    box-sizing: border-box; }
+  input:hover ~ ._1i2AX {
+    background-color: #e0e0e0;
+    border-color: #e0e0e0; }
+  input:checked:hover ~ ._1i2AX {
+    background-color: #e16840;
+    border-color: #e16840; }
+  input:checked ~ ._1i2AX {
+    background-color: #fb7448;
+    border-color: #fb7448;
+    color: #fff; }
+  input:disabled + ._1i2AX {
+    background-color: #f8f8f8;
+    border-color: #f8f8f8;
+    color: #c1c1c1; }
+  input:disabled:checked + ._1i2AX {
+    background-color: #e16840;
+    border-color: #e16840;
+    color: #fff; }
+  input:focus-visible + ._1i2AX {
+    border: 1px solid #6d87dd;
+    box-shadow: 0 0 8px #a7b7ea;
+    outline: none; }
+
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -1090,7 +1159,8 @@ Please ask a designer if you have questions about which colours to use.
   color: #555;
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
-  font-size: 14px; }
+  font-size: 14px;
+  min-height: 16px; }
 
 ._RXyG_ {
   line-height: normal;
@@ -1100,7 +1170,8 @@ Please ask a designer if you have questions about which colours to use.
   color: #555;
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
-  font-size: 14px; }
+  font-size: 14px;
+  min-height: 16px; }
 
 /*********************************
 For new colours, see _colors.scss.
@@ -2020,7 +2091,8 @@ Please ask a designer if you have questions about which colours to use.
   color: #555;
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
-  font-size: 14px; }
+  font-size: 14px;
+  min-height: 16px; }
 
 /**
 This component is built with acessibility in mind.
@@ -2045,6 +2117,7 @@ Just for future references:
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
   font-size: 14px;
+  min-height: 16px;
   margin-left: 8px; }
 
 ._1jEiW {