Merge branch 'development' into feature/instant/tell-amount-available

1 files changed, 22 insertions, 0 deletions

diff --git a/packages/website/ts/constants/utilities.tsx b/packages/website/ts/constants/utilities.tsx
new file mode 100644
index 000000000..ee5c5b4ce
--- /dev/null
+++ b/packages/website/ts/constants/utilities.tsx
@@ -0,0 +1,22 @@
+export interface PaddingInterface {
+    padding?: number | Array<'large' | 'default' | 'small' | number>;
+    margin?: number | Array<'large' | 'default' | 'small' | number>;
+}
+
+interface PaddingSizes {
+    [key: string]: string;
+}
+
+export const PADDING_SIZES: PaddingSizes = {
+    default: '30px',
+    large: '60px',
+    small: '15px',
+};
+
+export const getCSSPadding = (value: number | Array<string | number> = 0): string => {
+    if (Array.isArray(value)) {
+        return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' ');
+    } else {
+        return `${value}px`;
+    }
+};