@7shifts/sous-chef 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,8 +1,8 @@
-## NEXT RELEASE
+## 1.3.0 (September 27th, 2021)
 
 ### New components
 
--   DataTable ([#50](https://github.com/7shifts/sous-chef/pull/50))
+-   DataTable ([#50](https://github.com/7shifts/sous-chef/pull/50)) - And added editable functionality ([#54](https://github.com/7shifts/sous-chef/pull/54))
 
 ## 1.2.2 (September 24rd, 2021)
 

package/dist/actions/PaginationControls/PaginationControls.d.ts

@@ -6,7 +6,7 @@ declare type Props = {
     onNextClick: () => void;
 };
 /**
- * `PaginationControls` are two buttons side by side, currently most used within ResourceTable.
+ * `PaginationControls` are two buttons side by side.
  */
 declare const PaginationControls: React.FC<Props>;
 export default PaginationControls;

package/dist/core/index.d.ts

@@ -2,6 +2,11 @@ import ResourceTable from './ResourceTable';
 import ResourceTableRow from './ResourceTableRow';
 import Inline from './Inline';
 import Stack from './Stack';
-export { ResourceTable, ResourceTableRow, Inline, Stack };
+import DataTable from './DataTable';
+import DataTableRow from './DataTableRow';
+import DataTableCell from './DataTable/DataTableCell/DataTableCell';
+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';

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/index.css

@@ -618,8 +618,60 @@ Please ask a designer if you have questions about which colours to use.
   border-radius: 0;
   margin-left: -1px; }
 
-._3CaV0 {
-  max-width: 500px; }
+/*********************************
+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.
+*/
+._1d8Ci {
+  display: flex; }
+  ._1d8Ci:not(:last-child) {
+    border-bottom: 1px solid #e0e0e0; }
+  ._1d8Ci:hover {
+    background: #f8f8f8; }
+
+._1d8Ci:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+       that do support :focus-visible */
+  outline: none; }
+
+._thFcO {
+  cursor: pointer; }
+  ._thFcO:hover {
+    background-color: #f8f8f8; }
+
+._3tb7U {
+  border: 1px solid #6d87dd;
+  box-sizing: border-box;
+  box-shadow: 0 0 8px #a7b7ea; }
+  ._3tb7U:first-child {
+    border-radius: 8px 8px 0 0; }
+  ._3tb7U:last-child {
+    border-radius: 0 0 8px 8px;
+    border-bottom: 1px solid #6d87dd; }
+
+._OTcMc {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative; }
+  ._lNHQ8 {
+    padding: 16px; }
+  ._13YLe {
+    flex-direction: unset;
+    justify-content: flex-end; }
+  ._1rrRr:not(:last-child) {
+    border-right: 1px solid #e0e0e0; }
+
+._azbIG {
+  width: 40px;
+  padding: 16px; }
 
 /*********************************
 For new colours, see _colors.scss.
@@ -632,16 +684,52 @@ The smaller the number the lighter the color. So $eggplant-100 would be light pu
 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.
 */
-._h724f {
-  line-height: normal;
-  padding: 0;
-  width: auto;
-  float: none;
+._of22N {
+  display: flex;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: "Proxima Nova", sans-serif;
   color: #555;
+  padding: 19px 17px 8px 17px; }
+
+._27x4v {
+  display: flex;
+  align-items: center; }
+  ._27x4v:not(._27x4v:first-child) {
+    padding-left: 16px; }
+  ._27x4v:not(._27x4v:last-child) {
+    padding-right: 16px; }
+  ._3gw3Z {
+    cursor: pointer; }
+  ._Fjm2n {
+    justify-content: flex-end; }
+
+._27x4v:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+       that do support :focus-visible */
+  outline: none; }
+
+._LoIvx {
+  width: 40px; }
+
+._3VjFP {
+  display: inline-block;
+  padding: 0 8px; }
+
+._1bTmd {
+  border: 1px solid #c1c1c1;
+  border-radius: 8px;
   font-family: "Proxima Nova", sans-serif;
-  font-weight: 600;
   font-size: 14px; }
 
+._1opWx {
+  background: #f8f8f8;
+  font-weight: 600; }
+
+._F_spz {
+  margin-top: 20px;
+  font-family: "Proxima Nova", sans-serif; }
+
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -653,11 +741,31 @@ The smaller the number the lighter the color. So $eggplant-100 would be light pu
 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.
 */
-._1DWBq {
+._orjDM {
+  padding: 16px; }
+  ._3EpfF {
+    text-align: right; }
+
+/*********************************
+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.
+*/
+._h724f {
+  line-height: normal;
+  padding: 0;
+  width: auto;
+  float: none;
   color: #555;
   font-family: "Proxima Nova", sans-serif;
-  font-weight: 400;
-  font-size: 12px; }
+  font-weight: 600;
+  font-size: 14px; }
 
 /*********************************
 For new colours, see _colors.scss.
@@ -670,8 +778,8 @@ The smaller the number the lighter the color. So $eggplant-100 would be light pu
 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.
 */
-._nZ2MD {
-  color: #e76767;
+._1DWBq {
+  color: #555;
   font-family: "Proxima Nova", sans-serif;
   font-weight: 400;
   font-size: 12px; }
@@ -687,40 +795,11 @@ The smaller the number the lighter the color. So $eggplant-100 would be light pu
 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.
 */
-._BkzdC {
-  border-radius: 4px;
-  padding: 7px;
-  box-shadow: none;
-  border: 1px solid #c1c1c1;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 90px; }
-  ._BkzdC textarea {
-    line-height: 22px;
-    font-size: 14px;
-    font-family: "Proxima Nova", sans-serif;
-    color: #555;
-    margin: 0;
-    border: none;
-    resize: none;
-    width: auto;
-    height: auto;
-    padding: 0; }
-    ._BkzdC textarea:focus {
-      outline: none; }
-    ._BkzdC textarea:disabled {
-      background-color: #f8f8f8; }
-  ._Rop31 {
-    border: 1px solid #6d87dd;
-    box-shadow: 0 0 8px #a7b7ea;
-    outline: none; }
-  ._2x3Cm {
-    background-color: #f8f8f8; }
-  ._3zOwV {
-    border-color: #e76767 !important; }
-  ._rQqnL {
-    margin-top: 5px; }
+._nZ2MD {
+  color: #e76767;
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 400;
+  font-size: 12px; }
 
 /*********************************
 For new colours, see _colors.scss.
@@ -783,6 +862,95 @@ Please ask a designer if you have questions about which colours to use.
   right: 0;
   text-align: right; }
 
+/*********************************
+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.
+*/
+._kIngZ {
+  width: 100%; }
+  ._kIngZ input {
+    border: 1px solid transparent;
+    display: flex;
+    justify-content: flex-end;
+    background: transparent;
+    padding: 16px;
+    width: 100%;
+    font-size: 14px;
+    font-family: "Proxima Nova", sans-serif; }
+    ._kIngZ input:focus {
+      border-color: #6d87dd;
+      box-shadow: 0 0 8px #a7b7ea;
+      outline: none; }
+  ._3_QIj {
+    text-align: right; }
+  ._32mWH {
+    border-top-left-radius: 8px; }
+  ._3Jg2- {
+    border-top-right-radius: 8px; }
+  ._1F5fj {
+    border-bottom-left-radius: 8px; }
+  ._1fTTW {
+    border-bottom-right-radius: 8px; }
+
+._y9SBQ._y9SBQ {
+  border-color: #e76767; }
+
+._3CaV0 {
+  max-width: 500px; }
+
+/*********************************
+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.
+*/
+._BkzdC {
+  border-radius: 4px;
+  padding: 7px;
+  box-shadow: none;
+  border: 1px solid #c1c1c1;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 90px; }
+  ._BkzdC textarea {
+    line-height: 22px;
+    font-size: 14px;
+    font-family: "Proxima Nova", sans-serif;
+    color: #555;
+    margin: 0;
+    border: none;
+    resize: none;
+    width: auto;
+    height: auto;
+    padding: 0; }
+    ._BkzdC textarea:focus {
+      outline: none; }
+    ._BkzdC textarea:disabled {
+      background-color: #f8f8f8; }
+  ._Rop31 {
+    border: 1px solid #6d87dd;
+    box-shadow: 0 0 8px #a7b7ea;
+    outline: none; }
+  ._2x3Cm {
+    background-color: #f8f8f8; }
+  ._3zOwV {
+    border-color: #e76767 !important; }
+  ._rQqnL {
+    margin-top: 5px; }
+
 /*********************************
 For new colours, see _colors.scss.
 **********************************/