feat(block-header/footer): support inset layout

konstaui · Aug 29, 2022 · 3108ce5 · 3108ce5
1 parent c525c88
commit 3108ce5
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,