@oneblink/apps-react 5.1.2-beta.1 → 5.1.2-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/messages/ErrorMessage.js +1 -1
  2. package/dist/components/messages/ErrorMessage.js.map +1 -1
  3. package/dist/styles/list.scss +14 -0
  4. package/dist/styles/utils.scss +79 -0
  5. package/dist/styles.css +104 -3
  6. package/dist/styles.scss +1 -1
  7. package/package.json +1 -1
package/dist/components/messages/ErrorMessage.js CHANGED
@@ -7,7 +7,7 @@ function ErrorMessage({ title, children, gutterTop, gutterBottom, IconComponent,
7
7
  IconComponent = ErrorIcon;
8
8
  }
9
9
  return (React.createElement(React.Fragment, null,
10
- React.createElement(LargeIconMessage, { IconComponent: IconComponent, title: title, variant: "error", gutterTop: gutterTop, gutterBottom: gutterBottom, action: onTryAgain && (React.createElement(Button, { variant: "outlined", color: "primary", onClick: () => onTryAgain() }, "Try Again")), className: "ob-error-snackbar" }, children)));
10
+ React.createElement(LargeIconMessage, { IconComponent: IconComponent, title: title, variant: "error", gutterTop: gutterTop, gutterBottom: gutterBottom, action: onTryAgain && (React.createElement(Button, { variant: "outlined", color: "primary", onClick: () => onTryAgain(), "data-cypress": "error-try-again-button" }, "Try Again")), className: "ob-error-snackbar" }, children)));
11
11
  }
12
12
  export default React.memo(ErrorMessage);
13
13
  //# sourceMappingURL=ErrorMessage.js.map
package/dist/components/messages/ErrorMessage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../../src/components/messages/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,2BAA2B,CAAA;AACjD,OAAO,gBAEN,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAUtC,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,aAAa,EACb,UAAU,GACJ;IACN,IAAI,CAAC,aAAa,EAAE;QAClB,aAAa,GAAG,SAAS,CAAA;KAC1B;IAED,OAAO,CACL;QACE,oBAAC,gBAAgB,IACf,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,OAAO,EACf,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,MAAM,EACJ,UAAU,IAAI,CACZ,oBAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,gBAGpB,CACV,EAEH,SAAS,EAAC,mBAAmB,IAE5B,QAAQ,CACQ,CAClB,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ErrorIcon from '@mui/icons-material/Error'\nimport LargeIconMessage, {\n Props as LargeIconMessageProps,\n} from './LargeIconMessage'\nimport { Button } from '@mui/material'\ntype Props = {\n IconComponent?: LargeIconMessageProps['IconComponent']\n title: string\n gutterTop?: boolean\n gutterBottom?: boolean\n children?: React.ReactNode\n onTryAgain?: () => void\n}\n\nfunction ErrorMessage({\n title,\n children,\n gutterTop,\n gutterBottom,\n IconComponent,\n onTryAgain,\n}: Props) {\n if (!IconComponent) {\n IconComponent = ErrorIcon\n }\n\n return (\n <>\n <LargeIconMessage\n IconComponent={IconComponent}\n title={title}\n variant=\"error\"\n gutterTop={gutterTop}\n gutterBottom={gutterBottom}\n action={\n onTryAgain && (\n <Button\n variant=\"outlined\"\n color=\"primary\"\n onClick={() => onTryAgain()}\n >\n Try Again\n </Button>\n )\n }\n className=\"ob-error-snackbar\"\n >\n {children}\n </LargeIconMessage>\n </>\n )\n}\n\nexport default React.memo<Props>(ErrorMessage)\n"]}
1
+ {"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../../src/components/messages/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,2BAA2B,CAAA;AACjD,OAAO,gBAEN,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAUtC,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,aAAa,EACb,UAAU,GACJ;IACN,IAAI,CAAC,aAAa,EAAE;QAClB,aAAa,GAAG,SAAS,CAAA;KAC1B;IAED,OAAO,CACL;QACE,oBAAC,gBAAgB,IACf,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,OAAO,EACf,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,MAAM,EACJ,UAAU,IAAI,CACZ,oBAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,kBACd,wBAAwB,gBAG9B,CACV,EAEH,SAAS,EAAC,mBAAmB,IAE5B,QAAQ,CACQ,CAClB,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ErrorIcon from '@mui/icons-material/Error'\nimport LargeIconMessage, {\n Props as LargeIconMessageProps,\n} from './LargeIconMessage'\nimport { Button } from '@mui/material'\ntype Props = {\n IconComponent?: LargeIconMessageProps['IconComponent']\n title: string\n gutterTop?: boolean\n gutterBottom?: boolean\n children?: React.ReactNode\n onTryAgain?: () => void\n}\n\nfunction ErrorMessage({\n title,\n children,\n gutterTop,\n gutterBottom,\n IconComponent,\n onTryAgain,\n}: Props) {\n if (!IconComponent) {\n IconComponent = ErrorIcon\n }\n\n return (\n <>\n <LargeIconMessage\n IconComponent={IconComponent}\n title={title}\n variant=\"error\"\n gutterTop={gutterTop}\n gutterBottom={gutterBottom}\n action={\n onTryAgain && (\n <Button\n variant=\"outlined\"\n color=\"primary\"\n onClick={() => onTryAgain()}\n data-cypress=\"error-try-again-button\"\n >\n Try Again\n </Button>\n )\n }\n className=\"ob-error-snackbar\"\n >\n {children}\n </LargeIconMessage>\n </>\n )\n}\n\nexport default React.memo<Props>(ErrorMessage)\n"]}
package/dist/styles/list.scss CHANGED
@@ -106,4 +106,18 @@
106
106
  margin-left: -$section-padding-mobile-x;
107
107
  width: calc(100% + #{$section-padding-mobile-x * 2});
108
108
  }
109
+
110
+ .ob-list__item {
111
+ &.is-clickable-mobile {
112
+ cursor: pointer;
113
+
114
+ &:hover {
115
+ background-color: $white-bis;
116
+ }
117
+
118
+ &:focus {
119
+ outline: none;
120
+ }
121
+ }
122
+ }
109
123
  }
package/dist/styles/utils.scss CHANGED
@@ -1,3 +1,53 @@
1
+ .has-margin-left-1 {
2
+ margin-left: $size-1;
3
+ }
4
+ .has-margin-left-2 {
5
+ margin-left: $size-2;
6
+ }
7
+ .has-margin-left-3 {
8
+ margin-left: $size-3;
9
+ }
10
+ .has-margin-left-4 {
11
+ margin-left: $size-4;
12
+ }
13
+ .has-margin-left-5 {
14
+ margin-left: $size-5;
15
+ }
16
+ .has-margin-left-6 {
17
+ margin-left: $size-6;
18
+ }
19
+ .has-margin-left-7 {
20
+ margin-left: $size-7;
21
+ }
22
+ .has-margin-left-8 {
23
+ margin-left: $size-8;
24
+ }
25
+
26
+ .has-margin-right-1 {
27
+ margin-right: $size-1;
28
+ }
29
+ .has-margin-right-2 {
30
+ margin-right: $size-2;
31
+ }
32
+ .has-margin-right-3 {
33
+ margin-right: $size-3;
34
+ }
35
+ .has-margin-right-4 {
36
+ margin-right: $size-4;
37
+ }
38
+ .has-margin-right-5 {
39
+ margin-right: $size-5;
40
+ }
41
+ .has-margin-right-6 {
42
+ margin-right: $size-6;
43
+ }
44
+ .has-margin-right-7 {
45
+ margin-right: $size-7;
46
+ }
47
+ .has-margin-right-8 {
48
+ margin-right: $size-8;
49
+ }
50
+
1
51
  .has-margin-bottom-1 {
2
52
  margin-bottom: $size-1;
3
53
  }
@@ -61,3 +111,32 @@
61
111
  .has-line-breaks {
62
112
  white-space: pre-wrap;
63
113
  }
114
+
115
+ .has-thick-border-left {
116
+ border-left-width: $size-8;
117
+ border-left-style: solid;
118
+ border-left-color: $dark;
119
+ transition: border-left-color 0.5s;
120
+
121
+ &.is-primary-thick-border-left {
122
+ border-left-color: $primary;
123
+ }
124
+ &.is-link-thick-border-left {
125
+ border-left-color: $link;
126
+ }
127
+ &.is-link-thick-border-left {
128
+ border-left-color: $primary;
129
+ }
130
+ &.is-info-thick-border-left {
131
+ border-left-color: $info;
132
+ }
133
+ &.is-success-thick-border-left {
134
+ border-left-color: $success;
135
+ }
136
+ &.is-warning-thick-border-left {
137
+ border-left-color: $warning;
138
+ }
139
+ &.is-danger-thick-border-left {
140
+ border-left-color: $danger;
141
+ }
142
+ }
package/dist/styles.css CHANGED
@@ -7875,7 +7875,7 @@ button on-loading {
7875
7875
  padding: 0 0.5rem;
7876
7876
  }
7877
7877
  }
7878
- @media only screen and (max-width: 767px) {
7878
+ @media only screen and (max-width: 768px) {
7879
7879
  .modal .modal-card-foot .ob-button {
7880
7880
  min-width: unset;
7881
7881
  }
@@ -9014,6 +9014,70 @@ textarea:disabled {
9014
9014
  justify-content: center;
9015
9015
  }
9016
9016
 
9017
+ .has-margin-left-1 {
9018
+ margin-left: 3rem;
9019
+ }
9020
+
9021
+ .has-margin-left-2 {
9022
+ margin-left: 2.5rem;
9023
+ }
9024
+
9025
+ .has-margin-left-3 {
9026
+ margin-left: 2rem;
9027
+ }
9028
+
9029
+ .has-margin-left-4 {
9030
+ margin-left: 1.5rem;
9031
+ }
9032
+
9033
+ .has-margin-left-5 {
9034
+ margin-left: 1.25rem;
9035
+ }
9036
+
9037
+ .has-margin-left-6 {
9038
+ margin-left: 1rem;
9039
+ }
9040
+
9041
+ .has-margin-left-7 {
9042
+ margin-left: 0.75rem;
9043
+ }
9044
+
9045
+ .has-margin-left-8 {
9046
+ margin-left: 0.5rem;
9047
+ }
9048
+
9049
+ .has-margin-right-1 {
9050
+ margin-right: 3rem;
9051
+ }
9052
+
9053
+ .has-margin-right-2 {
9054
+ margin-right: 2.5rem;
9055
+ }
9056
+
9057
+ .has-margin-right-3 {
9058
+ margin-right: 2rem;
9059
+ }
9060
+
9061
+ .has-margin-right-4 {
9062
+ margin-right: 1.5rem;
9063
+ }
9064
+
9065
+ .has-margin-right-5 {
9066
+ margin-right: 1.25rem;
9067
+ }
9068
+
9069
+ .has-margin-right-6 {
9070
+ margin-right: 1rem;
9071
+ }
9072
+
9073
+ .has-margin-right-7 {
9074
+ margin-right: 0.75rem;
9075
+ }
9076
+
9077
+ .has-margin-right-8 {
9078
+ margin-right: 0.5rem;
9079
+ }
9080
+
9017
9081
  .has-margin-bottom-1 {
9018
9082
  margin-bottom: 3rem;
9019
9083
  }
@@ -9094,6 +9158,34 @@ textarea:disabled {
9094
9158
  white-space: pre-wrap;
9095
9159
  }
9096
9160
 
9161
+ .has-thick-border-left {
9162
+ border-left-width: 0.5rem;
9163
+ border-left-style: solid;
9164
+ border-left-color: hsl(0, 0%, 21%);
9165
+ transition: border-left-color 0.5s;
9166
+ }
9167
+ .has-thick-border-left.is-primary-thick-border-left {
9168
+ border-left-color: #4c8da7;
9169
+ }
9170
+ .has-thick-border-left.is-link-thick-border-left {
9171
+ border-left-color: hsl(229, 53%, 53%);
9172
+ }
9173
+ .has-thick-border-left.is-link-thick-border-left {
9174
+ border-left-color: #4c8da7;
9175
+ }
9176
+ .has-thick-border-left.is-info-thick-border-left {
9177
+ border-left-color: hsl(207, 61%, 53%);
9178
+ }
9179
+ .has-thick-border-left.is-success-thick-border-left {
9180
+ border-left-color: #4caf50;
9181
+ }
9182
+ .has-thick-border-left.is-warning-thick-border-left {
9183
+ border-left-color: #ff6f00;
9184
+ }
9185
+ .has-thick-border-left.is-danger-thick-border-left {
9186
+ border-left-color: hsl(348, 86%, 61%);
9187
+ }
9188
+
9097
9189
  .title.is-5 {
9098
9190
  font-weight: 300;
9099
9191
  }
@@ -9201,7 +9293,7 @@ textarea:disabled {
9201
9293
  flex: 1;
9202
9294
  }
9203
9295
 
9204
- @media only screen and (max-width: 767px) {
9296
+ @media only screen and (max-width: 768px) {
9205
9297
  .ob-form-container .ob-button {
9206
9298
  flex: 1;
9207
9299
  }
@@ -9412,7 +9504,7 @@ textarea:disabled {
9412
9504
  flex-direction: row;
9413
9505
  }
9414
9506
 
9415
- @media only screen and (max-width: 767px) {
9507
+ @media only screen and (max-width: 768px) {
9416
9508
  .ob-list__content-wrapper {
9417
9509
  flex-direction: column;
9418
9510
  }
@@ -9425,6 +9517,15 @@ textarea:disabled {
9425
9517
  margin-left: -0.5rem;
9426
9518
  width: calc(100% + 1rem);
9427
9519
  }
9520
+ .ob-list__item.is-clickable-mobile {
9521
+ cursor: pointer;
9522
+ }
9523
+ .ob-list__item.is-clickable-mobile:hover {
9524
+ background-color: hsl(0, 0%, 98%);
9525
+ }
9526
+ .ob-list__item.is-clickable-mobile:focus {
9527
+ outline: none;
9528
+ }
9428
9529
  }
9429
9530
  .ob-receipt {
9430
9531
  max-width: 400px;
package/dist/styles.scss CHANGED
@@ -25,7 +25,7 @@ $size-9: 0.25rem;
25
25
  //
26
26
  // Our Variables
27
27
  //
28
- $mobile: $tablet - 2px;
28
+ $mobile: $tablet - 1px;
29
29
  $secondary: $grey-lighter;
30
30
 
31
31
  //
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@oneblink/apps-react",
3
3
  "description": "Helper functions for OneBlink apps in ReactJS.",
4
- "version": "5.1.2-beta.1",
4
+ "version": "5.1.2-beta.3",
5
5
  "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
6
6
  "bugs": {
7
7
  "url": "https://github.com/oneblink/apps-react/issues"