@fibery/ui-kit 1.35.0 → 1.36.1

package/src/card-container.tsx

@@ -0,0 +1,483 @@
+import {preventDefault} from "@fibery/react/src/prevent-default";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {css} from "@linaria/core";
+import {styled} from "@linaria/react";
+import cx from "classnames";
+import {CSSProperties, ReactNode} from "react";
+import {getBg} from "./box";
+import {border, space, themeVars} from "./design-system";
+import {visuallyHidden} from "./styles-utils";
+
+export type CardSize =
+  | ":card-size/pinned"
+  | ":card-size/cell"
+  | ":card-size/compact"
+  | ":card-size/default"
+  | ":card-size/full"
+  | ":card-size/list"
+  | ":card-size/timeline"
+  | ":card-size/document"
+  | ":card-size/feed";
+
+const colorCodingWidth = space.s4;
+
+const unsetMaxWidthClassName = css`
+  max-width: unset !important;
+`;
+
+const colorCodingClassName = css`
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: ${colorCodingWidth}px;
+  border-radius: ${border.radius2}px;
+  opacity: 0.95;
+`;
+
+export const beforeClassName = css`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: ${space.s4}px;
+
+  & > div:empty {
+    display: none;
+  }
+`;
+
+const titleClassName = css`
+  display: flex;
+  overflow: hidden;
+  align-items: flex-start;
+`;
+
+export const titleTimelineClassName = css``;
+
+const titleListClassName = css`
+  padding: ${space.s4}px;
+  flex-grow: 1;
+  flex-basis: 100%;
+  flex-shrink: 2;
+  min-width: min-content;
+  max-width: max-content;
+  margin-right: auto;
+`;
+
+const afterCompactSize = css`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: ${space.s4}px;
+`;
+
+export const afterListSize = css`
+  display: inline-flex;
+  justify-self: end;
+  justify-content: flex-end;
+  gap: ${space.s4}px;
+  flex-basis: 40%;
+  flex-grow: 1;
+  min-width: min-content;
+  max-width: max-content;
+  flex-shrink: 1;
+
+  & > div:empty {
+    display: none;
+  }
+`;
+
+export const afterFeedSize = css`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${space.s4}px;
+
+  & > div:empty {
+    display: none;
+  }
+`;
+
+const afterFullSize = css`
+  display: flex;
+  flex-direction: column;
+  gap: ${space.s4}px;
+  align-items: flex-start;
+`;
+
+const cardClassName = css`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+  padding-left: ${space.s8}px;
+  padding-right: ${space.s6}px;
+  padding-top: ${space.s6}px;
+  padding-bottom: ${space.s8}px;
+  gap: ${space.s6}px;
+
+  & > div:empty:not(.${colorCodingClassName}) {
+    display: none;
+  }
+
+  & > div.title-wrapper:has(a:empty) {
+    display: none;
+  }
+`;
+
+const feedContainerClassName = css`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+  padding-left: ${space.s20}px;
+  padding-right: ${space.s20}px;
+  padding-top: ${space.s16}px;
+  padding-bottom: ${space.s4}px;
+  gap: ${space.s16}px;
+
+  & > div:empty:not(.${colorCodingClassName}) {
+    display: none;
+  }
+
+  & > div.title-wrapper:has(a:empty) {
+    display: none;
+  }
+`;
+
+const listClassName = css`
+  display: flex;
+  align-items: center;
+  padding-left: ${space.s4}px;
+  padding-right: ${space.s4}px;
+  gap: ${space.s4}px;
+  min-height: 30px;
+
+  & > div:empty:not(.${colorCodingClassName}) {
+    display: none;
+  }
+
+  & > div.title-wrapper:has(a:empty) {
+    display: none;
+  }
+`;
+
+const timelineClassName = css`
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  gap: ${space.s4}px;
+
+  & > div:empty:not(.${colorCodingClassName}) {
+    display: none;
+  }
+
+  & > div.title-wrapper:has(a:empty) {
+    display: none;
+  }
+`;
+
+const containerStyles = {
+  ":card-size/pinned": undefined,
+  ":card-size/cell": undefined,
+  ":card-size/compact": cardClassName,
+  ":card-size/default": cardClassName,
+  ":card-size/full": cardClassName,
+  ":card-size/list": listClassName,
+  ":card-size/timeline": timelineClassName,
+  ":card-size/document": undefined,
+  ":card-size/feed": feedContainerClassName,
+};
+
+const titleStyles = {
+  ":card-size/pinned": undefined,
+  ":card-size/cell": undefined,
+  ":card-size/compact": titleClassName,
+  ":card-size/default": titleClassName,
+  ":card-size/full": titleClassName,
+  ":card-size/list": titleListClassName,
+  ":card-size/timeline": titleTimelineClassName,
+  ":card-size/document": undefined,
+  ":card-size/feed": titleListClassName,
+};
+
+const afterStyles = {
+  ":card-size/pinned": undefined,
+  ":card-size/cell": undefined,
+  ":card-size/compact": afterCompactSize,
+  ":card-size/default": afterFullSize,
+  ":card-size/full": afterFullSize,
+  ":card-size/list": afterListSize,
+  ":card-size/timeline": afterListSize,
+  ":card-size/document": undefined,
+  ":card-size/feed": afterFeedSize,
+};
+
+const floatingClassName = css`
+  position: absolute;
+  right: ${space.s6}px;
+  top: ${space.s6}px;
+  z-index: 1;
+  display: flex;
+  gap: ${space.s6}px;
+`;
+
+const floatingListClassName = css`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: ${space.s6}px;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+`;
+
+const floatingStyles = {
+  ":card-size/pinned": undefined,
+  ":card-size/cell": undefined,
+  ":card-size/compact": floatingClassName,
+  ":card-size/default": floatingClassName,
+  ":card-size/full": floatingClassName,
+  ":card-size/list": floatingListClassName,
+  ":card-size/timeline": floatingListClassName,
+  ":card-size/document": undefined,
+  ":card-size/feed": floatingListClassName,
+};
+
+const coverClassName = css`
+  margin: ${-space.s4}px;
+
+  &:empty {
+    display: none;
+  }
+`;
+
+const coverWithContentClassName = css`
+  border-bottom: ${themeVars.separators.opacity5};
+  margin-bottom: 0;
+`;
+
+export const coverHeightBySize = {
+  ":card-size/full": 180,
+  ":card-size/default": 130,
+  ":card-size/compact": 110,
+  ":card-size/line": null,
+  ":card-size/document": null,
+  ":card-size/pinned": null,
+  ":card-size/cell": null,
+  ":card-size/list": null,
+  ":card-size/timeline": null,
+  ":card-size/feed": null,
+};
+
+const ColorCoding = styled.div<{backgroundColors: string[]}>`
+  background: ${({backgroundColors}) => getBg(backgroundColors)};
+`;
+
+type LinkWrapperProps = {
+  href?: string;
+  coverArea: boolean;
+  children: ReactNode;
+};
+
+const LinkWrapper = ({href, coverArea, children}: LinkWrapperProps) => {
+  if (href) {
+    return (
+      <a
+        href={href}
+        draggable="false"
+        onClick={preventDefault}
+        // To avoid tab on hidden link. but with this we can't open card via keyboard navigation.
+        tabIndex={-1}
+        data-is-card-hidden-link={true}
+        className={
+          coverArea
+            ? cx(
+                css`
+                  &::after {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                  }
+                `
+              )
+            : cx(
+                css`
+                  color: inherit;
+
+                  &:hover {
+                    color: inherit;
+                  }
+
+                  &:visited {
+                    color: inherit;
+                  }
+                `
+              )
+        }
+      >
+        {children}
+      </a>
+    );
+  } else {
+    return <>{children}</>;
+  }
+};
+
+type Props = {
+  before: ReactNode;
+  title: ReactNode;
+  after?: ReactNode;
+  floating?: ReactNode;
+  cover?: ReactNode;
+  size: CardSize;
+  contentStyle?: CSSProperties;
+  backgroundColors?: string[] | null;
+  input?: boolean;
+  linkHref?: string;
+  titleClassName?: string;
+};
+
+export const CardContainer = ({
+  cover,
+  before,
+  title,
+  after,
+  floating,
+  size,
+  contentStyle,
+  backgroundColors,
+  input,
+  linkHref,
+  titleClassName,
+}: Props) => {
+  const showCover = Boolean(cover && coverHeightBySize[size]);
+  const hasContent = Boolean(before || title || after);
+
+  return (
+    <>
+      {floating && (
+        <div
+          onClick={stopPropagation}
+          className={cx(
+            css`
+              display: grid;
+              grid-auto-flow: column;
+              gap: ${space.s4}px;
+            `,
+            floatingStyles[size]
+          )}
+        >
+          {floating}
+        </div>
+      )}
+      {showCover && (
+        <div
+          className={cx(coverClassName, hasContent && coverWithContentClassName)}
+          style={{height: coverHeightBySize[size] || 0}}
+        >
+          {cover}
+        </div>
+      )}
+      <div
+        className={css`
+          position: relative;
+        `}
+      >
+        <LinkWrapper href={linkHref} coverArea={true}>
+          <div className={visuallyHidden}>{title}</div>
+        </LinkWrapper>
+
+        {backgroundColors && <ColorCoding className={colorCodingClassName} backgroundColors={backgroundColors} />}
+
+        {(hasContent || !cover) && (
+          <div data-testid="card-container-title-visible" className={containerStyles[size]} style={contentStyle}>
+            {before && <div className={beforeClassName}>{before}</div>}
+            {title && (
+              <div
+                className={cx(
+                  {
+                    [unsetMaxWidthClassName]: input,
+                  },
+                  titleStyles[size],
+                  "title-wrapper",
+                  titleClassName
+                )}
+              >
+                <LinkWrapper href={linkHref} coverArea={false}>
+                  {title}
+                </LinkWrapper>
+              </div>
+            )}
+            {after && <div className={afterStyles[size]}>{after}</div>}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+const compactCardContainerClassName = css`
+  ${{
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    height: "100%",
+    position: "relative",
+    paddingLeft: space.s4,
+    paddingRight: space.s4,
+    paddingTop: 0,
+    paddingBottom: 0,
+  }}
+`;
+
+type CompactCardContainerProps = {
+  title: ReactNode;
+  floating?: ReactNode;
+  backgroundColors?: string[];
+};
+
+export const CompactCardContainer = ({title, floating, backgroundColors}: CompactCardContainerProps) => {
+  return (
+    <>
+      {floating && <div className={floatingClassName}>{floating}</div>}
+      <div className={compactCardContainerClassName}>
+        {backgroundColors && <ColorCoding className={colorCodingClassName} backgroundColors={backgroundColors} />}
+        {title && <div>{title}</div>}
+      </div>
+    </>
+  );
+};
+
+export const titleUnitsContainerClassName = css`
+  display: inline-grid;
+  min-width: ${space.s12}px;
+  vertical-align: top; /* needed to preserve proper block height in Firefox */
+`;
+
+type UnitGroupProps = {
+  renderedUnits: {reactElement: JSX.Element}[];
+};
+
+export const UnitGroup = ({renderedUnits}: UnitGroupProps) => {
+  return renderedUnits ? <>{renderedUnits.map((x) => x.reactElement)}</> : null;
+};
+
+type TitleUnitGroupProps = {
+  renderedUnits: {reactElement: JSX.Element}[];
+  className?: string;
+};
+
+export const TitleUnitGroup = ({renderedUnits, className}: TitleUnitGroupProps) => {
+  return renderedUnits ? (
+    <>
+      {renderedUnits.map((x) => (
+        <div key={x.reactElement.key} className={cx(titleUnitsContainerClassName, className)}>
+          {x.reactElement}
+        </div>
+      ))}
+    </>
+  ) : null;
+};

package/src/checkbox-multi-select.tsx

@@ -0,0 +1,71 @@
+import {useTheme} from "./theme-provider";
+import {css} from "@linaria/core";
+import {FC} from "react";
+import {Checkbox} from "./checkbox";
+import {layout, space, textStyles, ThemeColors} from "./design-system";
+
+const labelStyle = css`
+  ${textStyles.regular}
+  margin-left: ${space.s8}px;
+  line-height: ${layout.checkboxSize}px;
+`;
+
+const labelWrapperStyle = css`
+  min-width: 0;
+  margin-bottom: ${space.s12}px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+`;
+
+const optionsWrapperStyle = css`
+  display: flex;
+  flex-direction: column;
+  max-height: 400px;
+  overflow-y: auto;
+`;
+
+type Option = {
+  color?: string;
+  label?: string;
+  title?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onToggle: () => void;
+};
+
+interface CheckboxMultiSelectProps {
+  theme: ThemeColors;
+  color?: string;
+  options: Option[];
+}
+
+export const CheckboxMultiSelect: FC<CheckboxMultiSelectProps> = ({options, color, theme}) => {
+  return (
+    <div className={optionsWrapperStyle}>
+      {options.map(({checked, onToggle, label, disabled, title, color: optionColor}, index) => {
+        return (
+          <label
+            style={{cursor: disabled ? "not-allowed" : "pointer"}}
+            className={labelWrapperStyle}
+            key={index}
+            title={title}
+          >
+            <Checkbox
+              checked={checked}
+              onChange={onToggle}
+              disabled={disabled}
+              color={optionColor || color || (theme && theme.primary)}
+            />
+            <div className={labelStyle}>{label}</div>
+          </label>
+        );
+      })}
+    </div>
+  );
+};
+
+export const ThemedCheckboxMultiSelect: FC<Omit<CheckboxMultiSelectProps, "theme">> = (props) => {
+  const theme = useTheme();
+  return <CheckboxMultiSelect {...props} theme={theme} />;
+};