Channel list and preview

.github/workflows/release.yml → .github/workflows/workflow.yml

@@ -1,9 +1,14 @@
-name: Release
+name: Workflow
 
 on:
   push:
     branches:
       - main
+  pull_request:
+    branches:
+      - main
+      - develop
+      - theming2
 
 jobs:
   publish-release:

.stylelintignore

@@ -1,6 +1,7 @@
 node_modules
 build
 dist
+dist-v2
 /src/styles/vendor/
 /src/styles/MessageCommerce.scss
 /src/styles/MessageLivestream.scss

package.json

@@ -11,12 +11,12 @@
   "scripts": {
     "build": "yarn build-v1 && yarn build-v2",
     "build-v1": "rm -rf dist && mkdir -p dist && yarn bundle-sass && yarn copy-assets && yarn copy-styles",
-    "build-v2": "rm -rf dist-v2 && mkdir -p dist-v2 && yarn transform && yarn compile-to-css",
+    "build-v2": "rm -rf dist-v2 && mkdir -p dist-v2/scss && yarn transform && yarn compile-to-css",
     "transform": "postcss --dir dist-v2/scss --base src-v2/styles src-v2/styles",
     "compile-to-css": "sass dist-v2/scss/index.scss dist-v2/css/index.css --style compressed && sass dist-v2/scss/index.layout.scss dist-v2/css/index.layout.css --style compressed",
     "bundle-sass": "echo '\u001b[34mℹ\u001b[0m Compiling scss files to css bundle' && sass src/styles/index.scss dist/css/index.css --style compressed && echo '\u001b[32m✓\u001b[0m Finished bundling css'",
     "copy-assets": "echo '\u001b[34mℹ\u001b[0m Copying assets to distributed directory' && cp -R src/assets dist/assets && echo '\u001b[32m✓\u001b[0m Finished copying assets'",
-    "copy-styles": "echo '\u001b[34mℹ\u001b[0m Copying scss files to distributed directory' && cp -R src/styles dist/scss && cp -R src-v2/styles dist-v2/scss  && echo '\u001b[32m✓\u001b[0m Finished copying styles'",
+    "copy-styles": "echo '\u001b[34mℹ\u001b[0m Copying scss files to distributed directory' && cp -R src/styles dist/scss && echo '\u001b[32m✓\u001b[0m Finished copying styles'",
     "lint": "stylelint '**/*.scss' --max-warnings 0",
     "build:ci": "yarn && yarn lint && yarn build",
     "start": "yarn build && sass --watch src/styles/index.scss dist/css/index.css"

src-v2/styles/Avatar/Avatar-layout.scss

@@ -3,3 +3,9 @@
     text-align: center;
   }
 }
+
+.str-chat__loading-channels-avatar {
+  flex-shrink: 0;
+  width: calc(var(--str-chat__spacing-px) * 49);
+  height: calc(var(--str-chat__spacing-px) * 49);
+}

src-v2/styles/Avatar/Avatar-theme.scss

@@ -22,3 +22,7 @@
     text-transform: uppercase;
   }
 }
+
+.str-chat__loading-channels-avatar {
+  border-radius: var(--str-chat__avatar-border-radius);
+}

src-v2/styles/ChannelList/ChannelList-layout.scss

@@ -1,4 +1,15 @@
 .str-chat-channel-list {
   height: 100%;
   overflow-y: auto;
+
+  .str-chat__load-more-button {
+    display: flex;
+    justify-content: center;
+    margin: var(--str-chat__spacing-2) 0;
+  }
+
+  // This is displayed only in theme-v1
+  .str-chat__down-main {
+    display: none;
+  }
 }

src-v2/styles/ChannelList/ChannelList-theme.scss

@@ -10,8 +10,37 @@
   --str-chat__channel-list-border-block-end: none;
   --str-chat__channel-list-border-inline-start: none;
   --str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color);
+
+  --str-chat__channel-list-load-more-font-family: var(--str-chat__cta-button-font-family);
+  --str-chat__channel-list-load-more-border-radius: var(--str-chat__cta-button-border-radius);
+  --str-chat__channel-list-load-more-color: var(--str-chat__cta-button-color);
+  --str-chat__channel-list-load-more-background-color: var(--str-chat__cta-button-background-color);
+  --str-chat__channel-list-load-more-box-shadow: var(--str-chat__cta-button-box-shadow);
+  --str-chat__channel-list-load-more-border-block-start: var(
+    --str-chat__cta-button-border-block-start
+  );
+  --str-chat__channel-list-load-more-border-block-end: var(--str-chat__cta-button-border-block-end);
+  --str-chat__channel-list-load-more-border-inline-start: var(
+    --str-chat__cta-button-border-inline-start
+  );
+  --str-chat__channel-list-load-more-border-inline-end: var(
+    --str-chat__cta-button-border-inline-end
+  );
+  --str-chat__channel-list-load-more-pressed-background-color: var(
+    --str-chat__cta-button-pressed-background-color
+  );
+  --str-chat__channel-list-load-more-disabled-background-color: var(
+    --str-chat__cta-button-disabled-background-color
+  );
+  --str-chat__channel-list-load-more-disabled-color: var(--str-chat__cta-button-disabled-color);
 }
 
 .str-chat-channel-list {
   @include utils.component-layer-overrides('channel-list');
+
+  .str-chat__load-more-button__button {
+    @include utils.component-layer-overrides('channel-list-load-more');
+    @include utils.cta-button-overrides('channel-list-load-more');
+    width: 80%;
+  }
 }

src-v2/styles/ChannelPreview/ChannelPreview-layout.scss

@@ -1,24 +1,60 @@
 @use '../utils';
 
+@mixin channel-preview-layout {
+  // & selector is required for the postcss-logical plugin to properly transform the logical properties
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+  & {
+    display: flex;
+    column-gap: var(--str-chat__spacing-2);
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
+    text-align: start;
+  }
+}
+
+@mixin channel-preview-end-layout {
+  // & selector is required for the postcss-logical plugin to properly transform the logical properties
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+  & {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-0_5);
+    width: 100%;
+  }
+}
+
 .str-chat__channel-preview {
-  display: flex;
-  column-gap: var(--str-chat__spacing-2);
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
+  @include channel-preview-layout;
   cursor: pointer;
-  padding: var(--str-chat__spacing-2);
-  text-align: start;
 
   .str-chat__channel-preview-end {
+    @include channel-preview-end-layout;
     overflow: hidden; // need this for ellipsis text to work
-    display: flex;
-    flex-direction: column;
-    gap: var(--str-chat__spacing-0_5);
 
     .str-chat__channel-preview-messenger--name,
     .str-chat__channel-preview-messenger--last-message {
       @include utils.ellipsis-text;
     }
   }
 }
+
+.str-chat__channel-preview-loading {
+  @include channel-preview-layout;
+
+  .str-chat__channel-preview-end-loading {
+    @include channel-preview-end-layout;
+  }
+}
+
+// PostCSS transformations get into an endless loop if these selectors are nested under .str-chat__channel-preview-loading
+.str-chat__loading-channels-username {
+  height: calc(var(--str-chat__spacing-px) * 16);
+  width: calc(var(--str-chat__spacing-px) * 66);
+}
+
+.str-chat__loading-channels-status {
+  height: calc(var(--str-chat__spacing-px) * 16);
+  width: 100%;
+}

src-v2/styles/ChannelPreview/ChannelPreview-theme.scss

@@ -15,6 +15,7 @@
   --str-chat__channel-preview-latest-message-secondary-color: var(
     --str-chat__text-low-emphasis-color
   );
+  --str-chat__channel-preview-loading-state-color: var(--str-chat__disabled-color);
 }
 
 .str-chat__channel-preview {
@@ -37,7 +38,7 @@
   .str-chat__channel-preview-messenger--last-message {
     font-size: 0.875rem;
     line-height: 1rem;
-    color: var(--str-chat__channel-preview-latest-message-inactive-color);
+    color: var(--str-chat__channel-preview-latest-message-secondary-color);
     font-weight: 400;
   }
 
@@ -47,4 +48,48 @@
       color: var(--str-chat__channel-preview-color);
     }
   }
+
+  &.str-chat__channel-preview--unread {
+    .str-chat__channel-preview-messenger--last-message {
+      color: var(--str-chat__channel-preview-color);
+      font-weight: 500;
+    }
+  }
+}
+
+.str-chat__channel-preview-loading {
+  animation: pulsate 1s linear 0s infinite alternate;
+
+  &:nth-of-type(2) {
+    animation: pulsate 1s linear 0.3334 infinite alternate;
+  }
+
+  &:last-of-type {
+    animation: pulsate 1s linear 0.6667s infinite alternate;
+  }
+
+  @keyframes pulsate {
+    from {
+      opacity: 0.5;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .str-chat__loading-channels-avatar,
+  .str-chat__loading-channels-username,
+  .str-chat__loading-channels-status {
+    background-image: linear-gradient(
+      -90deg,
+      var(--str-chat__channel-preview-loading-state-color) 0%,
+      var(--str-chat__channel-preview-loading-state-color) 100%
+    );
+  }
+
+  .str-chat__loading-channels-username,
+  .str-chat__loading-channels-status {
+    border-radius: var(--str-chat__border-radius-xs);
+  }
 }

src-v2/styles/_common.scss

@@ -0,0 +1,7 @@
+.str-chat {
+  box-sizing: border-box;
+
+  * {
+    box-sizing: border-box;
+  }
+}

src-v2/styles/_theme-variables.scss

@@ -73,6 +73,7 @@
   --str-chat__yellow200: #fff1cc;
   --str-chat__yellow100: #fff8e5;
 
+  --str-chat__border-radius-xs: 8px;
   --str-chat__border-radius-sm: 16px;
   --str-chat__border-radius-md: 20px;
   --str-chat__border-radius-circle: 999px;

src-v2/styles/_utils.scss

@@ -6,6 +6,7 @@
 
 @mixin component-layer-overrides($component-name) {
   // & selector is required for the postcss-logical plugin to properly transform the logical properties
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
   & {
     background-color: var(--str-chat__#{$component-name}-background-color);
     color: var(--str-chat__#{$component-name}-color);
@@ -18,3 +19,14 @@
     border-inline-end: var(--str-chat__#{$component-name}-border-inline-end);
   }
 }
+
+@mixin cta-button-overrides($component-name) {
+  &:active {
+    background-color: var(--str-chat__#{$component-name}-pressed-background-color);
+  }
+
+  &:disabled {
+    background-color: var(--str-chat__#{$component-name}-disabled-background-color);
+    color: var(--str-chat__#{$component-name}-disabled-color);
+  }
+}

src-v2/styles/common/CTAButton/CTAButton-layout.scss

@@ -0,0 +1,4 @@
+.str-chat__cta-button {
+  padding: var(--str-chat__spacing-3_5) var(--str-chat__spacing-6);
+  cursor: pointer;
+}

src-v2/styles/common/CTAButton/CTAButton-theme.scss

@@ -0,0 +1,22 @@
+@use '../../utils';
+
+.str-chat {
+  --str-chat__cta-button-font-family: var(--str-chat__font-family);
+  --str-chat__cta-button-border-radius: var(--str-chat__border-radius-xs);
+  --str-chat__cta-button-color: var(--str-chat__on-primary-color);
+  --str-chat__cta-button-background-color: var(--str-chat__primary-color);
+  --str-chat__cta-button-border-block-start: none;
+  --str-chat__cta-button-border-block-end: none;
+  --str-chat__cta-button-border-inline-start: none;
+  --str-chat__cta-button-border-inline-end: none;
+  --str-chat__cta-button-box-shadow: none;
+  --str-chat__cta-button-pressed-background-color: var(--str-chat__active-primary-color);
+  --str-chat__cta-button-disabled-background-color: var(--str-chat__disabled-color);
+  --str-chat__cta-button-disabled-color: var(--str-chat__on-disabled-color);
+}
+
+.str-chat__cta-button {
+  @include utils.component-layer-overrides('cta-button');
+  @include utils.cta-button-overrides('cta-button');
+  font-size: 1rem;
+}

src-v2/styles/index.layout.scss

@@ -1,5 +1,7 @@
 @use 'theme-variables';
+@use 'common';
 
+@use 'common/CTAButton/CTAButton-layout.scss';
 @use 'ChannelList/ChannelList-layout';
 @use 'ChannelPreview/ChannelPreview-layout';
 @use 'Avatar/Avatar-layout';

src-v2/styles/index.scss

@@ -1,6 +1,5 @@
-@use 'theme-variables';
-
 @use 'index.layout.scss';
+@use 'common/CTAButton/CTAButton-theme.scss';
 @use 'ChannelList/ChannelList-theme';
 @use 'ChannelPreview/ChannelPreview-theme';
 @use 'Avatar/Avatar-theme';