feat: Contacts component (#153)

* Contacts component * Fixed React Component * Svelte, Vue Component * fix vue listgroup to receive same list props * fix svelte list dividers context * Added contacts props in React ListItem Component and in TypeScript (colors including) * Colors Names changed --------- Co-authored-by: Vladimir Kharlampidi <nolimits4web@gmail.com>
konstaui · Aug 4, 2023 · de8e0b2 · de8e0b2
1 parent 9724f7c
commit de8e0b2
Show file tree

Hide file tree

Showing 14 changed files with 299 additions and 9 deletions.
diff --git a/kitchen-sink/react/pages/ContactsList.jsx b/kitchen-sink/react/pages/ContactsList.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  Page,
+  Navbar,
+  NavbarBackLink,
+  List,
+  ListGroup,
+  ListItem,
+} from 'konsta/react';
+
+export default function ContactsListPage() {
+  const isPreview = document.location.href.includes('examplePreview');
+  return (
+    <Page>
+      <Navbar
+        title="Contacts List"
+        left={!isPreview && <NavbarBackLink onClick={() => history.back()} />}
+      />
+      <List strongIos>
+        <ListGroup dividers={false}>
+          <ListItem title="A" groupTitle contacts />
+          <ListItem title="Aaron" contacts />
+          <ListItem title="Abbie" contacts />
+          <ListItem title="Adam" contacts />
+          <ListItem title="Adele" contacts />
+          <ListItem title="Agatha" contacts />
+          <ListItem title="Agnes" contacts />
+          <ListItem title="Albert" contacts />
+          <ListItem title="Alexander" contacts />
+        </ListGroup>
+        <ListGroup dividers={false}>
+          <ListItem title="B" groupTitle contacts />
+          <ListItem title="Bailey" contacts />
+          <ListItem title="Barclay" contacts />
+          <ListItem title="Bartolo" contacts />
+          <ListItem title="Bellamy" contacts />
+          <ListItem title="Belle" contacts />
+          <ListItem title="Benjamin" contacts />
+        </ListGroup>
+        <ListGroup dividers={false}>
+          <ListItem title="C" groupTitle contacts />
+          <ListItem title="Caiden" contacts />
+          <ListItem title="Calvin" contacts />
+          <ListItem title="Candy" contacts />
+          <ListItem title="Carl" contacts />
+          <ListItem title="Cherilyn" contacts />
+          <ListItem title="Chester" contacts />
+          <ListItem title="Chloe" contacts />
+        </ListGroup>
+        <ListGroup dividers={false}>
+          <ListItem title="V" groupTitle contacts />
+          <ListItem title="Vladimir" contacts />
+        </ListGroup>
+      </List>
+    </Page>
+  );
+}
+ContactsListPage.displayName = 'ContactsListPage';
diff --git a/kitchen-sink/react/routes.js b/kitchen-sink/react/routes.js
@@ -5,6 +5,7 @@ import Buttons from './pages/Buttons.jsx';
 import Cards from './pages/Cards.jsx';
 import Checkbox from './pages/Checkbox.jsx';
 import Chips from './pages/Chips.jsx';
+import ContactsList from './pages/ContactsList.jsx';
 import ContentBlock from './pages/ContentBlock.jsx';
 import Dialog from './pages/Dialog.jsx';
 import Fab from './pages/Fab.jsx';
@@ -39,6 +40,7 @@ const routes = [
   Cards,
   Checkbox,
   Chips,
+  ContactsList,
   ContentBlock,
   Dialog,
   Fab,

diff --git a/kitchen-sink/svelte/pages/ContactsList.svelte b/kitchen-sink/svelte/pages/ContactsList.svelte
@@ -0,0 +1,58 @@
+<script>
+  import {
+    Page,
+    Navbar,
+    NavbarBackLink,
+    List,
+    ListGroup,
+    ListItem,
+  } from 'konsta/svelte';
+
+  const isPreview = document.location.href.includes('examplePreview');
+</script>
+
+<Page>
+  <Navbar title="Contacts List">
+    <svelte:fragment slot="left">
+      {#if !isPreview}
+        <NavbarBackLink onClick={() => history.back()} />
+      {/if}
+    </svelte:fragment>
+  </Navbar>
+  <List strongIos>
+    <ListGroup dividers={false}>
+      <ListItem title="A" groupTitle contacts/>
+      <ListItem title="Aaron" contacts />
+      <ListItem title="Abbie" contacts />
+      <ListItem title="Adam" contacts />
+      <ListItem title="Adele" contacts />
+      <ListItem title="Agatha" contacts />
+      <ListItem title="Agnes" contacts />
+      <ListItem title="Albert" contacts />
+      <ListItem title="Alexander" contacts />
+    </ListGroup>
+    <ListGroup dividers={false}>
+      <ListItem title="B" groupTitle contacts />
+      <ListItem title="Bailey" contacts />
+      <ListItem title="Barclay" contacts />
+      <ListItem title="Bartolo" contacts />
+      <ListItem title="Bellamy" contacts />
+      <ListItem title="Belle" contacts />
+      <ListItem title="Benjamin" contacts />
+    </ListGroup>
+    <ListGroup dividers={false}>
+      <ListItem title="C" groupTitle contacts />
+      <ListItem title="Caiden" contacts />
+      <ListItem title="Calvin" contacts />
+      <ListItem title="Candy" contacts />
+      <ListItem title="Carl" contacts />
+      <ListItem title="Cherilyn" contacts />
+      <ListItem title="Chester" contacts />
+      <ListItem title="Chloe" contacts />
+    </ListGroup>
+    <ListGroup dividers={false}>
+      <ListItem title="V" groupTitle contacts />
+      <ListItem title="Vladimir" contacts />
+    </ListGroup>
+  </List>
+</Page>
diff --git a/kitchen-sink/svelte/routes.js b/kitchen-sink/svelte/routes.js
@@ -5,6 +5,7 @@ import Buttons from './pages/Buttons.svelte';
 import Cards from './pages/Cards.svelte';
 import Checkbox from './pages/Checkbox.svelte';
 import Chips from './pages/Chips.svelte';
+import ContactsList from './pages/ContactsList.svelte';
 import ContentBlock from './pages/ContentBlock.svelte';
 import Dialog from './pages/Dialog.svelte';
 import Fab from './pages/Fab.svelte';
@@ -39,6 +40,7 @@ const pages = {
   Cards,
   Checkbox,
   Chips,
+  ContactsList,
   ContentBlock,
   Dialog,
   Fab,

diff --git a/kitchen-sink/vue/pages/ContactsList.vue b/kitchen-sink/vue/pages/ContactsList.vue
@@ -0,0 +1,73 @@
+<template>
+  <k-page>
+    <k-navbar title="Contacts List">
+      <template v-if="!isPreview" #left>
+        <k-navbar-back-link @click="() => history.back()" />
+      </template>
+    </k-navbar>
+    <k-list strong-ios>
+      <k-list-group :dividers="false">
+        <k-list-item title="A" contacts group-title />
+        <k-list-item title="Aaron" contacts />
+        <k-list-item title="Abbie" contacts />
+        <k-list-item title="Adam" contacts />
+        <k-list-item title="Adele" contacts />
+        <k-list-item title="Agatha" contacts />
+        <k-list-item title="Agnes" contacts />
+        <k-list-item title="Albert" contacts />
+        <k-list-item title="Alexander" contacts />
+      </k-list-group>
+      <k-list-group :dividers="false">
+        <k-list-item title="B" group-title contacts />
+        <k-list-item title="Bailey" contacts />
+        <k-list-item title="Barclay" contacts />
+        <k-list-item title="Bartolo" contacts />
+        <k-list-item title="Bellamy" contacts />
+        <k-list-item title="Belle" contacts />
+        <k-list-item title="Benjamin" contacts />
+      </k-list-group>
+      <k-list-group :dividers="false">
+        <k-list-item title="C" group-title contacts />
+        <k-list-item title="Caiden" contacts />
+        <k-list-item title="Calvin" contacts />
+        <k-list-item title="Candy" contacts />
+        <k-list-item title="Carl" contacts />
+        <k-list-item title="Cherilyn" contacts />
+        <k-list-item title="Chester" contacts />
+        <k-list-item title="Chloe" contacts />
+      </k-list-group>
+      <k-list-group :dividers="false">
+        <k-list-item title="V" group-title contacts />
+        <k-list-item title="Vladimir" contacts />
+      </k-list-group>
+    </k-list>
+  </k-page>
+</template>
+<script>
+  import {
+    kPage,
+    kNavbar,
+    kNavbarBackLink,
+    kList,
+    kListGroup,
+    kListItem,
+  } from 'konsta/vue';
+
+  export default {
+    name: 'ContactsListPage',
+    components: {
+      kPage,
+      kNavbar,
+      kNavbarBackLink,
+      kList,
+      kListGroup,
+      kListItem,
+    },
+    setup() {
+      return {
+        isPreview: document.location.href.includes('examplePreview'),
+        history: window.history,
+      };
+    },
+  };
+</script>
diff --git a/kitchen-sink/vue/routes.js b/kitchen-sink/vue/routes.js
@@ -6,6 +6,7 @@ import Buttons from './pages/Buttons.vue';
 import Cards from './pages/Cards.vue';
 import Checkbox from './pages/Checkbox.vue';
 import Chips from './pages/Chips.vue';
+import ContactsList from './pages/ContactsList.vue';
 import ContentBlock from './pages/ContentBlock.vue';
 import Dialog from './pages/Dialog.vue';
 import Fab from './pages/Fab.vue';
@@ -41,6 +42,7 @@ const routes = [
   Cards,
   Checkbox,
   Chips,
+  ContactsList,
   ContentBlock,
   Dialog,
   Fab,

diff --git a/src/react/components/ListItem.jsx b/src/react/components/ListItem.jsx
@@ -57,6 +57,7 @@ const ListItem = forwardRef((props, ref) => {
     linkProps = {},
 
     dividers: dividersProp,
+    contacts,
 
     ios,
     material,

diff --git a/src/shared/classes/ListItemClasses.js b/src/shared/classes/ListItemClasses.js
@@ -28,9 +28,13 @@ export const ListItemClasses = (
     titleFontSizeIos,
     titleFontSizeMaterial,
     strongTitle,
+    contacts,
   } = props;
   return {
-    base: menuListItem ? `${textColor} py-1` : '',
+    base: {
+      common: menuListItem ? `${textColor} py-1` : '',
+      material: contacts && '[&:nth-child(2)]:-mt-12',
+    },
     itemContent: {
       common: cls(`flex items-center ${contentClassName || contentClass}`),
       ios: cls(
@@ -41,7 +45,8 @@ export const ListItemClasses = (
         !menuListItem &&
           cls(
             colors.primaryTextMaterial,
-            isMediaItem ? 'ml-2-safe mr-2-safe rounded-2xl ps-2' : 'ps-4-safe'
+            isMediaItem ? 'ml-2-safe mr-2-safe rounded-2xl ps-2' : 'ps-4-safe',
+            contacts && 'ml-10'
           ),
         menuListItem && 'rounded-full min-h-[3.5rem] ml-4-safe mr-4-safe ps-4'
       ),
@@ -137,8 +142,24 @@ export const ListItemClasses = (
       ),
       ios: `h-8${dividers ? ' hairline-t' : ''} -mt-px ${titleFontSizeIos} ${
         colors.secondaryTextIos
-      } ${colors.groupTitleBgIos}`,
-      material: `h-12 ${titleFontSizeMaterial} ${colors.secondaryTextMaterial} ${colors.groupTitleBgMaterial}`,
+      } ${colors.groupTitleBgIos} ${
+        contacts &&
+        cls(
+          'font-semibold top-11-safe sticky',
+          colors.groupTitleContactsTextIos,
+          colors.groupTitleContactsBgIos
+        )
+      }`,
+      material: `h-12 ${titleFontSizeMaterial} ${
+        colors.secondaryTextMaterial
+      } ${colors.groupTitleBgMaterial} ${
+        contacts &&
+        cls(
+          'pointer-events-none overflow-visible h-12 box-border text-xl font-medium flex max-w-full items-center px-4 top-16-safe sticky',
+          colors.groupTitleContactsTextMaterial,
+          colors.groupTitleContactsBgMaterial
+        )
+      }`,
     },
   };
 };
diff --git a/src/shared/colors/ListItemColors.js b/src/shared/colors/ListItemColors.js
@@ -55,6 +55,19 @@ export const ListItemColors = (colorsProp = {}, dark) => {
       dark('dark:bg-md-dark-secondary-container')
     ),
     touchRipple: cls('touch-ripple-black', dark('dark:touch-ripple-white')),
+    groupTitleContactsTextIos: cls(
+      'text-opacity-90',
+      dark('dark:text-opacity-90')
+    ),
+    groupTitleContactsTextMaterial: cls(
+      'text-md-light-primary',
+      dark('dark:text-md-dark-primary')
+    ),
+    groupTitleContactsBgIos: cls(dark('dark:bg-[#323234]')),
+    groupTitleContactsBgMaterial: cls(
+      'bg-transparent',
+      dark('dark:bg-transparent')
+    ),
     ...colorsProp,
   };
 };
diff --git a/src/svelte/components/List.svelte b/src/svelte/components/List.svelte
@@ -35,7 +35,7 @@
 
   const dark = useDarkClasses();
 
-  $: hasDividers =
+  const hasDividers = () =>
     typeof dividers === 'undefined'
       ? theme === 'ios'
         ? dividersIos
@@ -60,9 +60,11 @@
         : insetMaterial
       : inset;
 
-  setReactiveContext('ListDividersContext', () => ({
-    value: hasDividers,
-  }));
+  setReactiveContext('ListDividersContext', () => {
+    return {
+      value: hasDividers(),
+    };
+  });
 
   $: colors = ListColors(colorsProp, dark);
 

diff --git a/src/svelte/components/ListItem.svelte b/src/svelte/components/ListItem.svelte
@@ -55,6 +55,7 @@
   export let href = undefined;
   export let target = undefined;
   export let dividers = undefined;
+  export let contacts = false;
 
   export let link = false;
   export let linkComponent = 'a';
@@ -144,6 +145,10 @@
         titleFontSizeIos,
         titleFontSizeMaterial,
         strongTitle,
+        contacts:
+        typeof contacts === 'false'
+          ? ''
+          : contacts,
       },
       colors,
       {