@descope/web-components-ui 1.0.390 → 1.0.391

package/src/components/descope-third-party-app-logo/ThirdPartyAppLogoClass.js

@@ -0,0 +1,102 @@
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
+import { IconClass } from '../descope-icon/IconClass';
+import { LogoClass } from '../descope-logo/LogoClass';
+import arrowsImg from './arrows.svg';
+
+export const componentName = getComponentName('third-party-app-logo');
+class RawThirdPartyAppLogoClass extends createBaseClass({
+  componentName,
+  baseSelector: '.wrapper',
+}) {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+				:host([draggable="true"]) > div {
+					pointer-events: none
+				}
+
+        .wrapper {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+				.third-party-app-logo {
+          flex-shrink: 0;
+					display: inline-block;
+					max-width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+				}
+
+        .company-logo-wrapper, .third-party-app-logo-wrapper {
+          flex-shrink: 0;
+          display: inline-flex;
+        }
+
+        .company-logo-wrapper {
+          justify-content: flex-end;
+        }
+
+        .third-party-app-logo-wrapper {
+          justify-content: flex-start;
+        }
+
+        .arrows {
+          flex-shrink: 0;
+          display: flex;
+        }
+
+			</style>
+			<div class="wrapper">
+        <div class="third-party-app-logo-wrapper">
+          <div class="third-party-app-logo"></div>
+        </div>
+        <div class="arrows">
+          <descope-icon src="${arrowsImg}"></descope-icon>
+        </div>
+        <div class="company-logo-wrapper">
+            <descope-logo></descope-logo>
+        </div>
+      </div>
+			`;
+  }
+}
+
+const companyLogoWrapper = '>.company-logo-wrapper';
+const thirdPartyAppLogoWrapper = '>.third-party-app-logo-wrapper';
+
+export const ThirdPartyAppLogoClass = compose(
+  createStyleMixin({
+    mappings: {
+      logoMaxHeight: [
+        { selector: companyLogoWrapper, property: 'height' },
+        { selector: thirdPartyAppLogoWrapper, property: 'height' },
+      ],
+      logoMaxWidth: [
+        { selector: companyLogoWrapper, property: 'max-width' },
+        { selector: thirdPartyAppLogoWrapper, property: 'max-width' },
+      ],
+      thirdPartyAppLogo: {
+        selector: () => '.third-party-app-logo',
+        property: 'content',
+        fallback: {},
+      },
+      companyLogoFallback: {
+        selector: LogoClass.componentName,
+        property: LogoClass.cssVarList.fallbackUrl,
+      },
+      gap: {},
+      arrowsColor: { selector: IconClass.componentName, property: IconClass.cssVarList.fill },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawThirdPartyAppLogoClass);

package/src/components/descope-third-party-app-logo/arrows.svg

@@ -0,0 +1,4 @@
+<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.14492 15.645L7.49992 14L2.83325 18.6667L7.49992 23.3333L9.14492 21.6883L7.30159 19.8333H24.9999V17.5H7.30159L9.14492 15.645Z" fill="#636C74"/>
+<path d="M19.855 12.3553L21.5 14.0003L26.1667 9.33366L21.5 4.66699L19.855 6.31199L21.6983 8.16699H4V10.5003H21.6983L19.855 12.3553Z" fill="#636C74"/>
+</svg>

package/src/components/descope-third-party-app-logo/index.js

@@ -0,0 +1,7 @@
+import { componentName, ThirdPartyAppLogoClass } from './ThirdPartyAppLogoClass';
+import '../descope-icon';
+import '../descope-logo';
+
+customElements.define(componentName, ThirdPartyAppLogoClass);
+
+export { ThirdPartyAppLogoClass };

package/src/helpers/index.js

@@ -6,13 +6,19 @@ export const kebabCase = (str) =>
 
 export const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
 
+export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+export const camelCaseJoin = (...args) =>
+  args
+    .filter(Boolean)
+    .map((arg, index) => (index === 0 ? arg : upperFirst(arg)))
+    .join('');
+
 export const compose =
   (...fns) =>
   (val) =>
     fns.reduceRight((res, fn) => fn(res), val);
 
-export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-
 export const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
 
 export const isUrl = (maybeUrl) => {

package/src/index.cjs.js

@@ -53,3 +53,4 @@ export { ListClass } from './components/descope-list/ListClass';
 export { ListItemClass } from './components/descope-list/ListItemClass';
 export { AppsListClass } from './components/descope-apps-list/AppsListClass';
 export { ScopesListClass } from './components/descope-scopes-list/ScopesListClass';
+export { ThirdPartyAppLogoClass } from './components/descope-third-party-app-logo/ThirdPartyAppLogoClass';

package/src/index.js

@@ -45,6 +45,7 @@ export * from './components/descope-radio-group';
 export * from './components/descope-list';
 export * from './components/descope-apps-list';
 export * from './components/descope-scopes-list';
+export * from './components/descope-third-party-app-logo';
 
 export {
   globalsThemeToStyle,

package/src/mixins/createStyleMixin/helpers.js

@@ -1,4 +1,4 @@
-import { isFunction, kebabCase } from '../../helpers';
+import { camelCaseJoin, isFunction, kebabCase, kebabCaseJoin } from '../../helpers';
 import { getCssVarName } from '../../helpers/componentHelpers';
 
 const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
@@ -46,8 +46,17 @@ const normalizeConfig = (attr, config) => {
   return [{ ...defaultMapping, ...config }];
 };
 
+const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin(origVarName, suffix);
+
 export const createStyle = (componentName, baseSelector, mappings) => {
   const style = new StyleBuilder();
+  const createFallbackVar = (fallback, origVarName) => {
+    if (!fallback) return '';
+    if (typeof fallback === 'string') return fallback;
+
+    const fallbackVarName = getFallbackVarName(origVarName, fallback?.suffix);
+    return createCssVar(fallbackVarName, createFallbackVar(fallback.fallback, fallbackVarName));
+  };
 
   Object.keys(mappings).forEach((attr) => {
     const attrConfig = normalizeConfig(attr, mappings[attr]);
@@ -56,10 +65,11 @@ export const createStyle = (componentName, baseSelector, mappings) => {
 
     attrConfig.forEach(
       ({ selector: relativeSelectorOrSelectorFn, property, important, fallback }) => {
+        const fallbackValue = createFallbackVar(fallback, cssVarName);
         style.add(
           createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
           isFunction(property) ? property() : property,
-          createCssVar(cssVarName, fallback) + (important ? '!important' : '')
+          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
         );
       }
     );
@@ -68,11 +78,27 @@ export const createStyle = (componentName, baseSelector, mappings) => {
   return style.toString();
 };
 
+const getFallbackVarsNames = (attr, origVarName, { fallback }) => {
+  if (!fallback) return {};
+
+  const fallbackVarName = getFallbackVarName(origVarName, fallback.suffix);
+  const fallbackAttrName = camelCaseJoin(attr, fallback.suffix || 'fallback');
+  return {
+    [fallbackAttrName]: fallbackVarName,
+    ...getFallbackVarsNames(fallbackAttrName, fallbackVarName, fallback),
+  };
+};
+
 export const createCssVarsList = (componentName, mappings) =>
-  Object.keys(mappings).reduce(
-    (acc, attr) => Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
-    {}
-  );
+  Object.keys(mappings).reduce((acc, attr) => {
+    const varName = getCssVarName(componentName, attr);
+
+    return Object.assign(
+      acc,
+      { [attr]: varName },
+      getFallbackVarsNames(attr, varName, mappings[attr])
+    );
+  }, {});
 
 // on some cases we need a selector to be more specific than another
 // for this we have this fn that generate a class selector multiple times

package/src/mixins/createStyleMixin/index.js

@@ -54,7 +54,7 @@ export const createStyleMixin =
         this.#baseSelector = baseSelector ?? this.baseSelector;
         this.#getRootElement = getRootElement;
 
-        this.#styleAttributes = Object.keys(mappings).map((key) =>
+        this.#styleAttributes = Object.keys(CustomStyleMixinClass.cssVarList).map((key) =>
           kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
         );
       }

package/src/theme/components/index.js

@@ -47,6 +47,7 @@ import * as list from './list/list';
 import * as listItem from './list/listItem';
 import * as appsList from './appsList';
 import * as scopesList from './scopesList';
+import * as thirdPartyAppLogo from './thirdPartyAppLogo';
 
 const components = {
   button,
@@ -99,6 +100,7 @@ const components = {
   listItem,
   appsList,
   scopesList,
+  thirdPartyAppLogo,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/thirdPartyAppLogo.js

@@ -0,0 +1,36 @@
+import { ThirdPartyAppLogoClass } from '../../components/descope-third-party-app-logo/ThirdPartyAppLogoClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import globals from '../globals';
+
+const globalRefs = getThemeRefs(globals);
+const vars = ThirdPartyAppLogoClass.cssVarList;
+
+const thirdPartyAppLogo = {
+  [vars.gap]: globalRefs.spacing.lg,
+  [vars.arrowsColor]: globalRefs.colors.surface.dark,
+  [vars.thirdPartyAppLogoFallback]:
+    'url(https://imgs.descope.com/components/third-party-app-logo-placeholder.svg)',
+  [vars.companyLogoFallback]:
+    'url(https://imgs.descope.com/components/project-logo-placeholder.svg)',
+  size: {
+    xs: {
+      [vars.logoMaxHeight]: '30px',
+      [vars.logoMaxWidth]: '120px',
+    },
+    sm: {
+      [vars.logoMaxHeight]: '40px',
+      [vars.logoMaxWidth]: '160px',
+    },
+    md: {
+      [vars.logoMaxHeight]: '48px',
+      [vars.logoMaxWidth]: '200px',
+    },
+    lg: {
+      [vars.logoMaxHeight]: '60px',
+      [vars.logoMaxWidth]: '240px',
+    },
+  },
+};
+
+export default thirdPartyAppLogo;
+export { vars };