From 3108ce54bc9a7f7438a75fd0d967c8cd05dd5b31 Mon Sep 17 00:00:00 2001
From: Vladimir Kharlampidi <nolimits4web@gmail.com>
Date: Mon, 29 Aug 2022 17:21:56 +0300
Subject: [PATCH] feat(block-header/footer): support `inset` layout

---
 src/react/components/BlockFooter.jsx     | 19 ++++++++++++++++++-
 src/react/components/BlockHeader.jsx     | 19 ++++++++++++++++++-
 src/shared/classes/BlockFooterClasses.js |  8 +++++++-
 src/shared/classes/BlockHeaderClasses.js |  8 +++++++-
 src/shared/colors/BlockFooterColors.js   |  5 ++++-
 src/shared/colors/BlockHeaderColors.js   |  2 +-
 src/svelte/components/BlockFooter.svelte | 16 +++++++++++++++-
 src/svelte/components/BlockHeader.svelte | 16 +++++++++++++++-
 src/types/BlockHeader.d.ts               | 21 +++++++++++++++++++++
 src/vue/components/BlockFooter.vue       | 14 +++++++++++++-
 src/vue/components/BlockHeader.vue       | 16 +++++++++++++++-
 11 files changed, 134 insertions(+), 10 deletions(-)

diff --git a/src/react/components/BlockFooter.jsx b/src/react/components/BlockFooter.jsx
index f6dca63e..312dc8ed 100644
--- a/src/react/components/BlockFooter.jsx
+++ b/src/react/components/BlockFooter.jsx
@@ -1,6 +1,7 @@
 import React, { useRef, useImperativeHandle, forwardRef } from 'react';
 import { BlockFooterClasses } from '../../shared/classes/BlockFooterClasses.js';
 import { BlockFooterColors } from '../../shared/colors/BlockFooterColors.js';
+import { useTheme } from '../shared/use-theme.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
 import { useDarkClasses } from '../shared/use-dark-classes.js';
 
@@ -13,6 +14,10 @@ const BlockFooter = forwardRef((props, ref) => {
     ios,
     material,
 
+    inset,
+    insetIos,
+    insetMaterial,
+
     // Children
     children,
 
@@ -26,6 +31,15 @@ const BlockFooter = forwardRef((props, ref) => {
     el: elRef.current,
   }));
 
+  const theme = useTheme();
+
+  const isInset =
+    typeof inset === 'undefined'
+      ? theme === 'ios'
+        ? insetIos
+        : insetMaterial
+      : inset;
+
   const Component = component;
 
   const attrs = {
@@ -37,7 +51,10 @@ const BlockFooter = forwardRef((props, ref) => {
 
   const colors = BlockFooterColors(colorsProp, dark);
 
-  const c = themeClasses(BlockFooterClasses(props, colors), className);
+  const c = themeClasses(
+    BlockFooterClasses({ ...props, inset: isInset }, colors),
+    className
+  );
 
   return (
     <Component ref={elRef} className={c.base} {...attrs}>
diff --git a/src/react/components/BlockHeader.jsx b/src/react/components/BlockHeader.jsx
index 01e31ef5..153ecdc2 100644
--- a/src/react/components/BlockHeader.jsx
+++ b/src/react/components/BlockHeader.jsx
@@ -1,6 +1,7 @@
 import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { BlockHeaderClasses } from '../../shared/classes/BlockHeaderClasses.js';
 import { BlockHeaderColors } from '../../shared/colors/BlockHeaderColors.js';
+import { useTheme } from '../shared/use-theme.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
 import { useDarkClasses } from '../shared/use-dark-classes.js';
 
@@ -13,6 +14,10 @@ const BlockHeader = forwardRef((props, ref) => {
     ios,
     material,
 
+    inset,
+    insetIos,
+    insetMaterial,
+
     // Children
     children,
 
@@ -32,12 +37,24 @@ const BlockHeader = forwardRef((props, ref) => {
     ...rest,
   };
 
+  const theme = useTheme();
+
+  const isInset =
+    typeof inset === 'undefined'
+      ? theme === 'ios'
+        ? insetIos
+        : insetMaterial
+      : inset;
+
   const themeClasses = useThemeClasses({ ios, material });
   const dark = useDarkClasses();
 
   const colors = BlockHeaderColors(colorsProp, dark);
 
-  const c = themeClasses(BlockHeaderClasses(props, colors), className);
+  const c = themeClasses(
+    BlockHeaderClasses({ ...props, inset: isInset }, colors),
+    className
+  );
 
   return (
     <Component ref={elRef} className={c.base} {...attrs}>
diff --git a/src/shared/classes/BlockFooterClasses.js b/src/shared/classes/BlockFooterClasses.js
index 77636875..07e5ed9f 100644
--- a/src/shared/classes/BlockFooterClasses.js
+++ b/src/shared/classes/BlockFooterClasses.js
@@ -1,7 +1,13 @@
+import { cls } from '../cls.js';
+
 export const BlockFooterClasses = (props, colors) => {
+  const { inset } = props;
   return {
     base: {
-      common: `pl-4-safe pr-4-safe mb-8 flex items-center -mt-6 text-sm`,
+      common: cls(
+        `mb-8 flex items-center -mt-6 text-sm`,
+        inset ? 'pl-8-safe pr-8-safe' : 'pl-4-safe pr-4-safe'
+      ),
       ios: colors.textIos,
       material: colors.textMaterial,
     },
diff --git a/src/shared/classes/BlockHeaderClasses.js b/src/shared/classes/BlockHeaderClasses.js
index 0ffd79ae..b9b1e471 100644
--- a/src/shared/classes/BlockHeaderClasses.js
+++ b/src/shared/classes/BlockHeaderClasses.js
@@ -1,7 +1,13 @@
+import { cls } from '../cls.js';
+
 export const BlockHeaderClasses = (props, colors) => {
+  const { inset } = props;
   return {
     base: {
-      common: `pl-4-safe pr-4-safe mt-8 flex items-center -mb-6 text-sm`,
+      common: cls(
+        `mt-8 flex items-center -mb-6 text-sm`,
+        inset ? 'pl-8-safe pr-8-safe' : 'pl-4-safe pr-4-safe'
+      ),
       ios: colors.textIos,
       material: colors.textMaterial,
     },
diff --git a/src/shared/colors/BlockFooterColors.js b/src/shared/colors/BlockFooterColors.js
index edcd632d..96961316 100644
--- a/src/shared/colors/BlockFooterColors.js
+++ b/src/shared/colors/BlockFooterColors.js
@@ -2,7 +2,10 @@ import { cls } from '../cls.js';
 
 export const BlockFooterColors = (colorsProp = {}, dark) => {
   return {
-    textIos: cls('text-black', dark('text-white')),
+    textIos: cls(
+      'text-black text-opacity-75',
+      dark('dark:text-white dark:text-opacity-75')
+    ),
     textMaterial: cls(
       'text-md-light-on-surface-variant',
       dark('dark:text-md-dark-on-surface-variant')
diff --git a/src/shared/colors/BlockHeaderColors.js b/src/shared/colors/BlockHeaderColors.js
index 8f919431..2d11bc4e 100644
--- a/src/shared/colors/BlockHeaderColors.js
+++ b/src/shared/colors/BlockHeaderColors.js
@@ -2,7 +2,7 @@ import { cls } from '../cls.js';
 
 export const BlockHeaderColors = (colorsProp = {}, dark) => {
   return {
-    textIos: cls('text-black', dark('text-white')),
+    textIos: cls('text-black', dark('dark:text-white')),
     textMaterial: cls(
       'text-md-light-on-surface-variant',
       dark('dark:text-md-dark-on-surface-variant')
diff --git a/src/svelte/components/BlockFooter.svelte b/src/svelte/components/BlockFooter.svelte
index 1cf1ff36..d9bdbaba 100644
--- a/src/svelte/components/BlockFooter.svelte
+++ b/src/svelte/components/BlockFooter.svelte
@@ -1,6 +1,7 @@
 <script>
   import { BlockFooterClasses } from '../../shared/classes/BlockFooterClasses.js';
   import { BlockFooterColors } from '../../shared/colors/BlockFooterColors.js';
+  import { useTheme } from '../shared/use-theme.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
@@ -10,14 +11,27 @@
   export { colorsProp as colors };
   export let ios = undefined;
   export let material = undefined;
+  export let inset = undefined;
+  export let insetIos = undefined;
+  export let insetMaterial = undefined;
+
+  let theme;
+  theme = useTheme({}, (v) => (theme = v));
 
   const dark = useDarkClasses();
 
+  $: isInset =
+    typeof inset === 'undefined'
+      ? theme === 'ios'
+        ? insetIos
+        : insetMaterial
+      : inset;
+
   $: colors = BlockFooterColors(colorsProp, dark);
 
   $: c = useThemeClasses(
     { ios, material },
-    BlockFooterClasses({}, colors),
+    BlockFooterClasses({ inset: isInset }, colors),
     className,
     (v) => (c = v)
   );
diff --git a/src/svelte/components/BlockHeader.svelte b/src/svelte/components/BlockHeader.svelte
index 4a6531d4..cb939cbf 100644
--- a/src/svelte/components/BlockHeader.svelte
+++ b/src/svelte/components/BlockHeader.svelte
@@ -1,6 +1,7 @@
 <script>
   import { BlockHeaderClasses } from '../../shared/classes/BlockHeaderClasses.js';
   import { BlockHeaderColors } from '../../shared/colors/BlockHeaderColors.js';
+  import { useTheme } from '../shared/use-theme.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
@@ -10,14 +11,27 @@
   export { colorsProp as colors };
   export let ios = undefined;
   export let material = undefined;
+  export let inset = undefined;
+  export let insetIos = undefined;
+  export let insetMaterial = undefined;
+
+  let theme;
+  theme = useTheme({}, (v) => (theme = v));
 
   const dark = useDarkClasses();
 
+  $: isInset =
+    typeof inset === 'undefined'
+      ? theme === 'ios'
+        ? insetIos
+        : insetMaterial
+      : inset;
+
   $: colors = BlockHeaderColors(colorsProp, dark);
 
   $: c = useThemeClasses(
     { ios, material },
-    BlockHeaderClasses({}, colors),
+    BlockHeaderClasses({ inset: isInset }, colors),
     className,
     (v) => (c = v)
   );
diff --git a/src/types/BlockHeader.d.ts b/src/types/BlockHeader.d.ts
index e26bc969..121ad695 100644
--- a/src/types/BlockHeader.d.ts
+++ b/src/types/BlockHeader.d.ts
@@ -5,4 +5,25 @@ interface Props {
    * @default 'div'
    */
   component?: string;
+
+  /**
+   * Makes block header inset, overwrites `insetIos` and `insetMaterial`
+   *
+   * @default undefined
+   */
+  inset?: boolean;
+
+  /**
+   * Makes block header inset in iOS theme
+   *
+   * @default undefined
+   */
+  insetIos?: boolean;
+
+  /**
+   * Makes block header inset in Material theme
+   *
+   * @default undefined
+   */
+  insetMaterial?: boolean;
 }
diff --git a/src/vue/components/BlockFooter.vue b/src/vue/components/BlockFooter.vue
index 1d60c661..0fe08dd2 100644
--- a/src/vue/components/BlockFooter.vue
+++ b/src/vue/components/BlockFooter.vue
@@ -7,6 +7,7 @@
   import { computed } from 'vue';
   import { BlockFooterClasses } from '../../shared/classes/BlockFooterClasses.js';
   import { BlockFooterColors } from '../../shared/colors/BlockFooterColors.js';
+  import { useTheme } from '../shared/use-theme.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
@@ -28,13 +29,24 @@
         type: Boolean,
         default: undefined,
       },
+      inset: { type: Boolean, default: undefined },
+      insetIos: { type: Boolean, default: false },
+      insetMaterial: { type: Boolean, default: false },
     },
     setup(props) {
+      const theme = useTheme();
+      const isInset = computed(() =>
+        typeof props.inset === 'undefined'
+          ? theme.value === 'ios'
+            ? props.insetIos
+            : props.insetMaterial
+          : props.inset
+      );
       const colors = computed(() =>
         BlockFooterColors(props.colors || {}, useDarkClasses)
       );
       const c = useThemeClasses(props, () =>
-        BlockFooterClasses(props, colors.value)
+        BlockFooterClasses({ ...props, inset: isInset.value }, colors.value)
       );
       return {
         c,
diff --git a/src/vue/components/BlockHeader.vue b/src/vue/components/BlockHeader.vue
index 13646093..6257a892 100644
--- a/src/vue/components/BlockHeader.vue
+++ b/src/vue/components/BlockHeader.vue
@@ -5,6 +5,8 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useTheme } from '../shared/use-theme.js';
+
   import { BlockHeaderClasses } from '../../shared/classes/BlockHeaderClasses.js';
   import { BlockHeaderColors } from '../../shared/colors/BlockHeaderColors.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
@@ -28,14 +30,26 @@
         type: Boolean,
         default: undefined,
       },
+      inset: { type: Boolean, default: undefined },
+      insetIos: { type: Boolean, default: false },
+      insetMaterial: { type: Boolean, default: false },
     },
     setup(props) {
+      const theme = useTheme();
+      const isInset = computed(() =>
+        typeof props.inset === 'undefined'
+          ? theme.value === 'ios'
+            ? props.insetIos
+            : props.insetMaterial
+          : props.inset
+      );
+
       const colors = computed(() =>
         BlockHeaderColors(props.colors || {}, useDarkClasses)
       );
 
       const c = useThemeClasses(props, () =>
-        BlockHeaderClasses(props, colors.value)
+        BlockHeaderClasses({ ...props, inset: isInset.value }, colors.value)
       );
       return {
         c,