@sats-group/ui-lib 74.2.0

package/react/link-card/index.ts

@@ -0,0 +1,2 @@
+import LinkCard from './link-card';
+export default LinkCard;

package/react/link-card/link-card.scss

@@ -0,0 +1,37 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/elevation';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.link-card {
+  @include elevation.level(2);
+
+  background: light.$surface-primary-default;
+  border-radius: corner-radius.$s;
+  color:  light.$on-surface-primary-default;
+  display: grid;
+  gap: spacing.$s;
+  grid-template-columns: [first] [second];
+  padding: spacing.$m;
+  text-decoration: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background: light.$surface-primary-hover;
+    }
+  }
+
+  &__title {
+    color: light.$on-surface-primary-default;
+    grid-column: 1;
+  }
+
+  &__icon {
+    grid-column: 2;
+    justify-self: end;
+  }
+
+  &__text {
+    grid-column: span 2;
+  }
+}

package/react/link-card/link-card.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import ArrowRight from '../icons/24/arrow-right';
+import Text from '../text';
+
+import { LinkCard as Props } from './link-card.types';
+
+const LinkCard: React.FC<Props> = ({ href, text, title }) => (
+  <a className="link-card" href={href}>
+    <Text className="link-card__title" size={Text.sizes.basic}>
+      {title}
+    </Text>
+    <div className="link-card__icon">
+      <ArrowRight />
+    </div>
+    {text ? (
+      <div className="link-card__text">
+        <Text size={Text.sizes.small}>{text}</Text>
+      </div>
+    ) : null}
+  </a>
+);
+
+export default LinkCard;

package/react/link-card/link-card.types.ts

@@ -0,0 +1,5 @@
+export type LinkCard = {
+  href: string;
+  text?: string;
+  title: string;
+};

package/react/logos/e-avatar.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const SvgEAvatar = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={73}
+    height={72}
+    fill="currentColor"
+  >
+    <path d="m38.287 24.48-2.02 6.902h12.798l-2.41 8.446h-12.8l-2.233 7.726h17.16L46.3 56H19l11.63-40H58l-2.482 8.446h-17.23z" />
+  </svg>
+);
+export default SvgEAvatar;

package/react/logos/elixia-letter.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const SvgElixiaLetter = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={48}
+    height={51}
+    fill="currentColor"
+  >
+    <path d="m23.738 10.778-2.487 8.771h15.753l-2.968 10.735H18.284l-2.75 9.818h21.12L33.6 50.836H0L14.313 0H48l-3.054 10.735H23.738z" />
+  </svg>
+);
+export default SvgElixiaLetter;

package/react/logos/elixia-small.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const SvgElixiaSmall = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={93}
+    height={21}
+    fill="currentColor"
+  >
+    <path d="M9.94 4.28 8.902 7.803h6.483l-1.21 4.363h-6.57L6.483 16.11h8.816l-1.296 4.363H0L5.964 0h14.002l-1.297 4.363H9.94zM32.585 16.195l-1.297 4.363H17.805L23.769.084h5.186l-4.668 16.195h8.298zM40.536 0h5.186l-5.964 20.474h-5.186zM58.514 10.489l3.544 9.985h-5.273l-2.16-6.461-5.618 6.461h-5.964l9.594-10.657L49.093 0h5.272l2.161 6.293L61.971 0h5.964zM71.047 0h5.185L70.27 20.474h-5.186zM93 0v20.474h-4.58v-4.28h-7.002l-2.42 4.28h-5.532L86 0zm-4.58 11.831V3.86l-4.582 7.971z" />
+  </svg>
+);
+export default SvgElixiaSmall;

package/react/logos/elixia.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const SvgElixia = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={229}
+    height={52}
+    fill="currentColor"
+  >
+    <path d="m24.408 10.825-2.547 8.914H37.78l-2.972 11.037h-16.13l-2.76 9.975h21.65l-3.184 11.037H0L14.645 0h34.384l-3.184 11.037H24.408zM80.016 40.963 76.833 52h-33.11L58.366.212h12.735L59.641 41.175h20.375zM99.543 0h12.735L97.633 51.788H84.898zM143.69 26.53l8.702 25.258h-12.947l-5.306-16.343-13.796 16.343h-14.645l23.559-26.955L120.555 0h12.947l5.306 15.918L152.18 0h14.645zM174.465 0H187.2l-14.645 51.788H159.82zM228.376 0v51.788h-11.249V40.963h-17.192l-5.943 10.825h-13.584L211.184 0zm-11.249 29.927V9.763l-11.249 20.164z" />
+  </svg>
+);
+export default SvgElixia;

package/react/logos/index.ts

@@ -0,0 +1,8 @@
+export { default as EAvatar } from './e-avatar';
+export { default as ElixiaLetter } from './elixia-letter';
+export { default as ElixiaSmall } from './elixia-small';
+export { default as Elixia } from './elixia';
+export { default as SAvatar } from './s-avatar';
+export { default as SatsLetter } from './sats-letter';
+export { default as SatsSmall } from './sats-small';
+export { default as Sats } from './sats';

package/react/logos/s-avatar.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const SvgSAvatar = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={73}
+    height={72}
+    fill="currentColor"
+  >
+    <path d="m42.754 33.822-2.574-2.244c-1.545-1.32-2.414-2.41-2.414-3.895 0-1.881 1.352-3.564 4.216-3.564 1.93 0 3.732.693 5.373 2.31l7.112-5.445C52.568 18.441 48.707 16 43.01 16 34.613 16 28.5 21.61 28.5 29.003c0 3.73 1.995 6.304 4.601 8.581l2.575 2.244c1.77 1.584 2.51 2.575 2.51 3.96 0 2.08-1.448 4.06-5.085 4.06-2.703 0-5.116-1.089-6.918-3.168l-7.047 5.412C21.774 53.426 26.28 56 32.457 56c9.493 0 14.995-5.875 14.995-13.63.032-3.928-2.22-6.403-4.698-8.548" />
+  </svg>
+);
+export default SvgSAvatar;

package/react/logos/sats-letter.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const SvgSatsLetter = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={48}
+    height={52}
+    fill="currentColor"
+  >
+    <path d="m31.992 23.168-3.433-2.917c-2.059-1.716-3.217-3.132-3.217-5.063 0-2.445 1.802-4.633 5.62-4.633 2.574 0 4.977.9 7.165 3.003l9.482-7.08C45.078 3.176 39.929 0 32.335 0c-11.198 0-19.35 7.294-19.35 16.904 0 4.849 2.66 8.195 6.136 11.155l3.432 2.918c2.36 2.06 3.346 3.346 3.346 5.148 0 2.703-1.93 5.278-6.779 5.278-3.604 0-6.821-1.416-9.224-4.12L.5 44.32C4.018 48.654 10.025 52 18.262 52c12.657 0 19.994-7.637 19.994-17.72.043-5.105-2.96-8.323-6.264-11.112" />
+  </svg>
+);
+export default SvgSatsLetter;

package/react/logos/sats-small.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const SvgSatsSmall = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={79}
+    height={25}
+    fill="currentColor"
+  >
+    <path d="m4.514 17.404-4.232 3.27c1.599 2.307 4.42 4.038 8.37 4.038 5.831 0 9.217-3.558 9.217-8.27 0-2.403-1.41-3.846-2.915-5.192l-1.505-1.442c-.94-.866-1.41-1.539-1.41-2.404 0-1.154.752-2.212 2.538-2.212 1.223 0 2.446.481 3.574 1.731l4.232-3.27C21.35 2.02 18.903.289 15.142.289c-5.079 0-8.84 3.462-8.84 7.981 0 2.212 1.222 3.75 2.82 5.192l1.505 1.443c1.035.961 1.505 1.538 1.505 2.404 0 1.154-.846 2.404-3.103 2.404-1.787 0-3.386-.866-4.515-2.308m56.24 0-4.231 3.27c1.504 2.307 4.42 4.038 8.37 4.038 5.83 0 9.216-3.558 9.216-8.27 0-2.403-1.41-3.846-2.915-5.192l-1.505-1.442c-.94-.866-1.41-1.539-1.41-2.404 0-1.154.752-2.212 2.539-2.212 1.222 0 2.445.481 3.574 1.731l4.232-3.27C77.589 2.02 75.144.289 71.382.289c-5.078 0-8.84 3.462-8.84 7.981 0 2.212 1.222 3.75 2.821 5.192l1.505 1.443c1.034.961 1.505 1.538 1.505 2.404 0 1.154-.847 2.404-3.104 2.404-1.787 0-3.386-.866-4.514-2.308m-.752-11.73h-5.454l-5.079 18.46h-5.643l5.079-18.46h-5.831l1.41-5h17.023zM39.312 24.23V.769h-7.806L17.963 24.231h6.02l2.633-4.904h7.711v4.904zM34.327 5.288v9.039h-4.984z" />
+  </svg>
+);
+export default SvgSatsSmall;

package/react/logos/sats.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const SvgSats = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={168}
+    height={52}
+    fill="currentColor"
+  >
+    <path d="M9.6 36.2.6 43c3.4 4.8 9.4 8.4 17.8 8.4C30.8 51.4 38 44 38 34.2c0-5-3-8-6.2-10.8l-3.2-3c-2-1.8-3-3.2-3-5 0-2.4 1.6-4.6 5.4-4.6 2.6 0 5.2 1 7.6 3.6l9-6.8c-2.2-3.4-7.4-7-15.4-7-10.8 0-18.8 7.2-18.8 16.6 0 4.6 2.6 7.8 6 10.8l3.2 3c2.2 2 3.2 3.2 3.2 5 0 2.4-1.8 5-6.6 5-3.8 0-7.2-1.8-9.6-4.8m119.6 0-9 6.8c3.2 4.8 9.4 8.4 17.8 8.4 12.4 0 19.6-7.4 19.6-17.2 0-5-3-8-6.2-10.8l-3.2-3c-2-1.8-3-3.2-3-5 0-2.4 1.6-4.6 5.4-4.6 2.6 0 5.2 1 7.6 3.6l9-6.8c-2.2-3.4-7.4-7-15.4-7C141 .6 133 7.8 133 17.2c0 4.6 2.6 7.8 6 10.8l3.2 3c2.2 2 3.2 3.2 3.2 5 0 2.4-1.8 5-6.6 5-3.8 0-7.2-1.8-9.6-4.8m-1.6-24.4H116l-10.8 38.4h-12L104 11.8H91.6l3-10.4h36.2zm-44 38.6V1.6H67L38.2 50.4H51l5.6-10.2H73v10.2zM73 11v18.8H62.4z" />
+  </svg>
+);
+export default SvgSats;

package/react/message/hook/use-message.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+import type { MessageDetail } from '../message.types';
+import { subscribe } from '../publish';
+
+export const useMessage = (
+  initialMessage?: MessageDetail,
+): [message: MessageDetail | undefined, clearMessage: () => void] => {
+  const [message, setMessage] = useState(initialMessage);
+
+  const clearMessage = () => setMessage(undefined);
+
+  const onMessage = (message: MessageDetail) => {
+    setMessage(message);
+  };
+
+  useEffect(() => subscribe(onMessage), []);
+
+  return [message, clearMessage];
+};
+
+export default useMessage;

package/react/message/index.ts

@@ -0,0 +1,2 @@
+import Message from './message';
+export default Message;

package/react/message/message.scss

@@ -0,0 +1,92 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/elevation';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.message {
+  background: light.$surface-primary-default;
+  border-radius: corner-radius.$s;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: spacing.$m;
+  overflow: hidden;
+  padding: spacing.$s spacing.$s spacing.$s (spacing.$s * 2);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: spacing.$s;
+    background: light.$ge-signal-neutral;
+  }
+
+  @media (min-width: 600px) {
+    grid-template-columns: 1fr auto;
+  }
+
+  &--floating {
+    @include elevation.level(2);
+  }
+
+  &--inline,
+  &--mini {
+    border: 1px solid light.$ge-border-default;
+  }
+
+  &--mini {
+    padding: spacing.$xxs spacing.$xxs spacing.$xxs (spacing.$xxs * 4);
+
+    &::before {
+      width: spacing.$xxs * 2;
+    }
+  }
+
+  &--theme-error {
+    &::before {
+      background: light.$ge-signal-error;
+    }
+
+    .message__link {
+      color: light.$on-surface-error;
+    }
+  }
+
+  &--theme-warning {
+    &::before {
+      background: light.$ge-signal-warning;
+    }
+
+    .message__link {
+      color: light.$on-surface-warning;
+    }
+  }
+
+  &--theme-success {
+    &::before {
+      background: light.$ge-signal-success;
+    }
+
+    .message__link {
+      color: light.$on-surface-success;
+    }
+  }
+
+  &--has-button {
+    .message__main {
+      display: grid;
+      gap: spacing.$m;
+      grid-template-columns: auto 1fr;
+    }
+  }
+
+  &__link-container {
+    margin-top: spacing.$m;
+  }
+
+  &__link {
+    color: inherit;
+  }
+}

package/react/message/message.tsx

@@ -0,0 +1,60 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import Text from '../text';
+import VisuallyButton from '../visually-button';
+
+import { Message as Props, themes } from './message.types';
+
+const Message: React.FC<Props> & {
+  themes: typeof themes;
+} = ({ action, inline, link, mini, text, theme = themes.default }) => (
+  <div
+    className={cn('message', {
+      'message--floating': !inline,
+      'message--inline': inline,
+      'message--mini': mini,
+      [`message--theme-${theme}`]: theme,
+    })}
+  >
+    <div
+      className={cn('message__main', {
+        'message--has-button': action,
+      })}
+    >
+      <div>
+        <Text
+          className="message__text"
+          size={mini ? Text.sizes.small : Text.sizes.basic}
+        >
+          {text}
+        </Text>
+        {link ? (
+          <div className="message__link-container">
+            <Text
+              className="message__link"
+              elementName="a"
+              href={link.href}
+              size={mini ? Text.sizes.small : Text.sizes.basic}
+            >
+              {link.text}
+            </Text>
+          </div>
+        ) : null}
+      </div>
+    </div>
+    {action ? (
+      <div>
+        <VisuallyButton
+          {...action}
+          size={VisuallyButton.sizes.small}
+          variant={VisuallyButton.variants.secondary}
+        />
+      </div>
+    ) : null}
+  </div>
+);
+
+Message.themes = themes;
+
+export default Message;

package/react/message/message.types.ts

@@ -0,0 +1,39 @@
+import { ObjectValues } from '../types';
+import { VisuallyButton } from '../visually-button/visually-button.types';
+
+export const themes = {
+  default: 'default',
+  error: 'error',
+  success: 'success',
+  warning: 'warning',
+} as const;
+
+export type Message = {
+  action?: VisuallyButton;
+  inline?: boolean;
+  link?: {
+    href: string;
+    text: string;
+  };
+  mini?: boolean;
+  text: string;
+  theme?: ObjectValues<typeof themes>;
+};
+
+export const isMessageType = (
+  maybeMessageType?: string,
+): maybeMessageType is Message['theme'] =>
+  maybeMessageType
+    ? Boolean(themes[maybeMessageType as keyof Message['theme']])
+    : false;
+
+export const types: Record<string, Message['theme']> = {
+  default: themes.default,
+  error: themes.error,
+  success: themes.success,
+  warning: themes.warning,
+};
+
+export type MessageDetail = Pick<Message, 'link' | 'text' | 'theme'>;
+
+export type Listener = (event: MessageDetail) => void;

package/react/message/publish.ts

@@ -0,0 +1,19 @@
+import { Listener, MessageDetail } from './message.types';
+
+const eventName = 'user-message';
+
+export const publish = (message: MessageDetail) => {
+  if (!message) {
+    return;
+  }
+
+  window.dispatchEvent(new CustomEvent(eventName, { detail: message }));
+};
+
+const subscriber = (listener: Listener) => (event: CustomEvent) =>
+  listener(event.detail);
+
+export const subscribe = (listener: Listener) => {
+  window.addEventListener(eventName, subscriber(listener));
+  return () => window.removeEventListener(eventName, subscriber(listener));
+};

package/react/message-field/index.ts

@@ -0,0 +1,2 @@
+import MessageField from './message-field';
+export default MessageField;

package/react/message-field/message-field.scss

@@ -0,0 +1,21 @@
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.message-field {
+  display: flex;
+  width: 100%;
+  gap: spacing.$xs;
+  align-items: center;
+
+  &__message {
+    flex: 1;
+  }
+
+  &--variant-nested {
+    background: light.$background-primary-default;
+    padding: spacing.$m;
+    &-small {
+      padding: spacing.$s;
+    }
+  }
+}

package/react/message-field/message-field.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+
+import { MessageField as Props, variants, sizes } from './message-field.types';
+import Button from '../button';
+import TextArea from '../text-area';
+import Send from '@sats-group/icons/16/send';
+import Add from '@sats-group/icons/16/add';
+import classNames from 'classnames';
+
+const MessageField: React.FunctionComponent<Props> & {
+  variants: typeof variants;
+  sizes: typeof sizes;
+} = ({
+  send,
+  input,
+  altButton,
+  variant = variants.nested,
+  size = sizes.default,
+  isSubmitting,
+  onAltButtonClick = () => {},
+  onClickFunc = () => {},
+}) => {
+  const [hasTyped, setHasTyped] = useState(false);
+  return (
+    <div
+      className={classNames('message-field', {
+        [`message-field--variant-${variant}`]: variant,
+        [`message-field--variant-${variant}-${size}`]: size,
+      })}
+    >
+      {altButton ? (
+        <Button
+          {...altButton}
+          leadingIcon={<Add />}
+          variant={Button.variants.tertiary}
+          onClick={onAltButtonClick}
+          size={size === sizes.small ? Button.sizes.small : Button.sizes.basic}
+        />
+      ) : null}
+      <div className="message-field__message">
+        <TextArea
+          {...input}
+          onChange={e => {
+            setHasTyped(!!e.target.value.length);
+          }}
+          isLabelVisible={false}
+          size={
+            size === sizes.small ? TextArea.sizes.small : TextArea.sizes.default
+          }
+          isShort
+        />
+      </div>
+      <div>
+        <Button
+          {...send}
+          leadingIcon={<Send />}
+          disabled={!hasTyped || isSubmitting}
+          theme={isSubmitting ? Button.themes.spinner : Button.themes.normal}
+          variant={Button.variants.complete}
+          onClick={onClickFunc}
+          size={size === sizes.small ? Button.sizes.small : Button.sizes.basic}
+        />
+      </div>
+    </div>
+  );
+};
+
+MessageField.variants = variants;
+MessageField.sizes = sizes;
+export default MessageField;

package/react/message-field/message-field.types.ts

@@ -0,0 +1,24 @@
+import type { Button } from '../button/button.types';
+import type { TextArea } from '../text-area/text-area.types';
+import type { ObjectValues } from '../types';
+
+export const variants = {
+  nested: 'nested',
+  standalone: 'standalone',
+} as const;
+
+export const sizes = {
+  default: 'default',
+  small: 'small',
+} as const;
+
+export type MessageField = {
+  send: Button;
+  input: TextArea;
+  altButton?: Button;
+  variant?: ObjectValues<typeof variants>;
+  size?: ObjectValues<typeof sizes>;
+  isSubmitting?: boolean;
+  onAltButtonClick?: () => void;
+  onClickFunc?: () => void;
+};

package/react/modal/index.ts

@@ -0,0 +1,2 @@
+import Modal from './modal';
+export default Modal;