@olenbetong/synergi-react 0.6.46 → 0.7.1

package/src/LinkedCardList/index.scss

@@ -4,83 +4,83 @@ $bullet-size: 0.7em;
 $line-width: 0.2em;
 
 .ObLinkedList-root {
-  list-style-type: none;
-  margin-left: 0;
-  padding-left: 0;
+	list-style-type: none;
+	margin-left: 0;
+	padding-left: 0;
 }
 
 .ObLinkedList-item {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
+	display: flex;
+	align-items: center;
+	flex-direction: row;
 }
 
 .ObLinkedList-leftColumn {
-  flex: 1 1 4em;
-  font-size: 0.75em;
-  padding: 0 1em;
-  text-align: center;
+	flex: 1 1 4em;
+	font-size: 0.75em;
+	padding: 0 1em;
+	text-align: center;
 }
 
 .ObLinkedList-rightColumn {
-  flex: 1 1 100%;
-  padding: 1em 1em 1em 1.5em;
+	flex: 1 1 100%;
+	padding: 1em 1em 1em 1.5em;
 }
 
 .ObLinkedList-line {
-  display: flex;
-  align-self: stretch;
-  flex: 0 0 $line-width;
-  background: white;
-  position: relative;
+	display: flex;
+	align-self: stretch;
+	flex: 0 0 $line-width;
+	background: white;
+	position: relative;
 }
 
 .ObLinkedList-bullet {
-  background: white;
+	background: white;
 
-  border: 1px solid rgba(50, 50, 50, 0.25);
-  border-radius: 0.55em;
-  height: $bullet-size;
-  width: $bullet-size;
+	border: 1px solid rgba(50, 50, 50, 0.25);
+	border-radius: 0.55em;
+	height: $bullet-size;
+	width: $bullet-size;
 
-  position: absolute;
-  left: 0;
-  top: 50%;
+	position: absolute;
+	left: 0;
+	top: 50%;
 
-  transform: translate(calc(-1 * ($bullet-size / 2) + ($line-width / 2)), -50%);
+	transform: translate(calc(-1 * ($bullet-size / 2) + ($line-width / 2)), -50%);
 }
 
 .ObLinkedList-card {
-  background: white;
-  border: 1px solid;
-  border-color: $color-border-top $color-border-side $color-border-bottom;
-  border-radius: 0.1875em;
-  color: inherit;
-  cursor: pointer;
-  flex: 100% 1 1;
-  position: relative;
+	background: white;
+	border: 1px solid;
+	border-color: $color-border-top $color-border-side $color-border-bottom;
+	border-radius: 0.1875em;
+	color: inherit;
+	cursor: pointer;
+	flex: 100% 1 1;
+	position: relative;
 }
 
 .ObLinkedList-card::before {
-  border-bottom: 0.5em solid transparent;
-  border-right: 1em solid white;
-  border-top: 0.5em solid transparent;
-  content: " ";
-  filter: drop-shadow(-1px 0px 1px rgba(50, 50, 50, 0.2));
-  height: 1em;
-  left: -1em;
-  margin-top: -0.5em;
-  position: absolute;
-  top: 50%;
-  width: 1em;
+	border-bottom: 0.5em solid transparent;
+	border-right: 1em solid white;
+	border-top: 0.5em solid transparent;
+	content: " ";
+	filter: drop-shadow(-1px 0px 1px rgba(50, 50, 50, 0.2));
+	height: 1em;
+	left: -1em;
+	margin-top: -0.5em;
+	position: absolute;
+	top: 50%;
+	width: 1em;
 }
 
 .ObLinkedList-card:hover {
-  background-color: $block-color-bg-hover !important;
-  color: inherit;
-  text-decoration: inherit;
+	background-color: $block-color-bg-hover !important;
+	color: inherit;
+	text-decoration: inherit;
 }
 
 .ObLinkedList-card:hover::before {
-  border-right-color: $block-color-bg-hover !important;
+	border-right-color: $block-color-bg-hover !important;
 }

package/src/LinkedCardList/index.tsx

@@ -3,36 +3,36 @@ import "./index.scss";
 import clsx from "clsx";
 
 export function List({ children, className, ...other }: React.HTMLProps<HTMLUListElement>) {
-  return (
-    <ul className={clsx("ObLinkedList-root", className)} {...other}>
-      {children}
-    </ul>
-  );
+	return (
+		<ul className={clsx("ObLinkedList-root", className)} {...other}>
+			{children}
+		</ul>
+	);
 }
 
 export function ListItem({
-  children,
-  className,
-  label,
-  ...other
+	children,
+	className,
+	label,
+	...other
 }: React.HTMLProps<HTMLLIElement> & { label: React.ReactNode }) {
-  return (
-    <li className={clsx("ObLinkedList-item", className)} {...other}>
-      {label && <div className="ObLinkedList-leftColumn">{label}</div>}
-      <div className="ObLinkedList-line">
-        <div className="ObLinkedList-bullet" />
-      </div>
-      <div className="ObLinkedList-rightColumn">{children}</div>
-    </li>
-  );
+	return (
+		<li className={clsx("ObLinkedList-item", className)} {...other}>
+			{label && <div className="ObLinkedList-leftColumn">{label}</div>}
+			<div className="ObLinkedList-line">
+				<div className="ObLinkedList-bullet" />
+			</div>
+			<div className="ObLinkedList-rightColumn">{children}</div>
+		</li>
+	);
 }
 
 export function Card({ as, children, className, ...other }: React.HTMLProps<HTMLDivElement> & { as?: any }) {
-  const Component = as || "div";
+	const Component = as || "div";
 
-  return (
-    <Component className={clsx("ObLinkedList-card", className)} {...other}>
-      {children}
-    </Component>
-  );
+	return (
+		<Component className={clsx("ObLinkedList-card", className)} {...other}>
+			{children}
+		</Component>
+	);
 }

package/src/PageBanner/index.scss

@@ -1,99 +1,99 @@
 @import "../styles/variables";
 
 .ObPageBanner-root {
-  background-color: $brand-primary;
-  background-color: var(--brand-dark);
-  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2);
-  color: white;
-
-  a {
-    color: hsl(200, 50%, 80%);
-  }
+	background-color: $brand-primary;
+	background-color: var(--brand-dark);
+	box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2);
+	color: white;
+
+	a {
+		color: hsl(200, 50%, 80%);
+	}
 }
 
 .ObPageBanner-inner {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-
-  @media screen and (min-width: $screen-md) {
-    align-items: flex-start;
-    flex-direction: row;
-  }
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+
+	@media screen and (min-width: $screen-md) {
+		align-items: flex-start;
+		flex-direction: row;
+	}
 }
 
 .ObPageBanner-plantTitle {
-  font-size: 2rem;
+	font-size: 2rem;
 
-  @media screen and (min-width: $screen-lg) {
-    font-size: 3rem;
-  }
+	@media screen and (min-width: $screen-lg) {
+		font-size: 3rem;
+	}
 }
 
 .ObPageBanner-bannerImage {
-  align-self: stretch;
-  background-color: #ddd;
-  display: inline-block;
-  height: 20vh;
-  object-fit: cover;
-  object-position: center center;
-  width: 100%;
-
-  @media screen and (min-width: $screen-sm) {
-    align-self: center;
-    margin: 0;
-    margin-right: 1rem;
-    border: 0.4rem solid white;
-    border-radius: 50%;
-    height: 150px;
-    width: 150px;
-  }
-
-  @media screen and (min-width: $screen-lg) {
-    height: 250px;
-    width: 250px;
-  }
+	align-self: stretch;
+	background-color: #ddd;
+	display: inline-block;
+	height: 20vh;
+	object-fit: cover;
+	object-position: center center;
+	width: 100%;
+
+	@media screen and (min-width: $screen-sm) {
+		align-self: center;
+		margin: 0;
+		margin-right: 1rem;
+		border: 0.4rem solid white;
+		border-radius: 50%;
+		height: 150px;
+		width: 150px;
+	}
+
+	@media screen and (min-width: $screen-lg) {
+		height: 250px;
+		width: 250px;
+	}
 }
 
 .ObPageBanner-bannerTitle {
-  margin-bottom: 1rem;
-  margin-top: 1rem;
-  font-size: 2rem;
+	margin-bottom: 1rem;
+	margin-top: 1rem;
+	font-size: 2rem;
 
-  @media screen and (min-width: $screen-md) {
-    margin-top: 0;
-  }
+	@media screen and (min-width: $screen-md) {
+		margin-top: 0;
+	}
 
-  @media screen and (min-width: $screen-lg) {
-    font-size: 3rem;
-  }
+	@media screen and (min-width: $screen-lg) {
+		font-size: 3rem;
+	}
 }
 
 .ObPageBanner-tabList {
-  &.sticky {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-  }
+	&.sticky {
+		position: -webkit-sticky;
+		position: sticky;
+		top: 0;
+		z-index: 1000;
+	}
 }
 
 .ObPageBanner-tabListInner {
-  overflow-x: auto;
-  scrollbar-width: thin;
-  white-space: nowrap;
+	overflow-x: auto;
+	scrollbar-width: thin;
+	white-space: nowrap;
 }
 
 .ObPageBanner-tab {
-  border-bottom: 0.25rem solid transparent;
-  display: inline-block;
-  margin-top: 0.5rem;
-  min-width: 8rem;
-  padding: 0.5rem 1rem;
-  text-align: center;
-  text-transform: capitalize;
-
-  &.active {
-    border-color: white;
-  }
+	border-bottom: 0.25rem solid transparent;
+	display: inline-block;
+	margin-top: 0.5rem;
+	min-width: 8rem;
+	padding: 0.5rem 1rem;
+	text-align: center;
+	text-transform: capitalize;
+
+	&.active {
+		border-color: white;
+	}
 }

package/src/PageBanner/index.tsx

@@ -4,76 +4,76 @@ import clsx from "clsx";
 import React from "react";
 
 export type PageBannerProps = React.HTMLProps<HTMLDivElement> & {
-  as?: "header" | "section" | "div";
+	as?: "header" | "section" | "div";
 };
 
 export function PageBanner({ as, className, children, ...other }: PageBannerProps) {
-  const Component = as ? as : "section";
+	const Component = as ? as : "section";
 
-  return (
-    <Component className={clsx("ObPageBanner-root", className)} {...other}>
-      <div className="container px-0">
-        <div className={"ObPageBanner-pageBannerInner"}>{children}</div>
-      </div>
-    </Component>
-  );
+	return (
+		<Component className={clsx("ObPageBanner-root", className)} {...other}>
+			<div className="container px-0">
+				<div className={"ObPageBanner-pageBannerInner"}>{children}</div>
+			</div>
+		</Component>
+	);
 }
 
 export type BannerImageProps = React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
 
 export const BannerImage = React.forwardRef<HTMLImageElement, BannerImageProps>(function BannerImage(
-  props: BannerImageProps,
-  ref
+	props: BannerImageProps,
+	ref
 ) {
-  const { className, ...other } = props;
-  return <img ref={ref} className={clsx("ObPageBanner-bannerImage", className)} {...other} />;
+	const { className, ...other } = props;
+	return <img ref={ref} className={clsx("ObPageBanner-bannerImage", className)} {...other} />;
 });
 
 export type TabListProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {
-  as?: "ul" | "ol" | "nav" | "div" | "span";
-  sticky?: boolean;
+	as?: "ul" | "ol" | "nav" | "div" | "span";
+	sticky?: boolean;
 };
 
 export function TabList({ as, className, children, sticky, ...other }: TabListProps) {
-  const Component = as ? as : "nav";
+	const Component = as ? as : "nav";
 
-  return (
-    <Component
-      className={clsx("ObPageBanner-pageBanner", "ObPageBanner-tabList", sticky && "sticky", className)}
-      {...other}
-    >
-      <div className="container px-0">
-        <div className={"ObPageBanner-tabListInner"}>{children}</div>
-      </div>
-    </Component>
-  );
+	return (
+		<Component
+			className={clsx("ObPageBanner-pageBanner", "ObPageBanner-tabList", sticky && "sticky", className)}
+			{...other}
+		>
+			<div className="container px-0">
+				<div className={"ObPageBanner-tabListInner"}>{children}</div>
+			</div>
+		</Component>
+	);
 }
 
 export type TabProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {
-  active?: boolean;
-  as?: "a" | "li" | "div" | "span";
+	active?: boolean;
+	as?: "a" | "li" | "div" | "span";
 };
 
 export function Tab({ active, as, className, children, ...other }: TabProps) {
-  const Component = as ? as : "a";
+	const Component = as ? as : "a";
 
-  return (
-    <Component className={clsx("ObPageBanner-tab", active && "active", className)} {...other}>
-      {children}
-    </Component>
-  );
+	return (
+		<Component className={clsx("ObPageBanner-tab", active && "active", className)} {...other}>
+			{children}
+		</Component>
+	);
 }
 
 export type TitleProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {
-  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span" | "p";
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span" | "p";
 };
 
 export function Title({ as, className, children, ...other }) {
-  const Component = as ? as : "h1";
+	const Component = as ? as : "h1";
 
-  return (
-    <Component className={clsx("ObPageBanner-bannerTitle", className)} {...other}>
-      {children}
-    </Component>
-  );
+	return (
+		<Component className={clsx("ObPageBanner-bannerTitle", className)} {...other}>
+			{children}
+		</Component>
+	);
 }

package/src/Portal/index.tsx

@@ -2,35 +2,35 @@ import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
 function useForceUpdate() {
-  const [, setVal] = useState(false);
+	const [, setVal] = useState(false);
 
-  return () => setVal(val => !val);
+	return () => setVal((val) => !val);
 }
 
 export function Portal({ children, root, type = "div" }) {
-  const forceUpdate = useForceUpdate();
-  const mountNode = useRef<HTMLDivElement>(null);
-  const portalNode = useRef<HTMLElement>(null);
+	const forceUpdate = useForceUpdate();
+	const mountNode = useRef<HTMLDivElement>(null);
+	const portalNode = useRef<HTMLElement>(null);
 
-  useEffect(() => {
-    const ownerDocument = mountNode.current?.ownerDocument;
-    let portalElem = portalNode.current;
-    if (ownerDocument && portalElem) {
-      let parent = root ? ownerDocument.querySelector(root) || ownerDocument.body : ownerDocument.body;
-      const node = ownerDocument.createElement(type);
-      portalElem = node;
-      parent.appendChild(node);
-      forceUpdate();
+	useEffect(() => {
+		const ownerDocument = mountNode.current?.ownerDocument;
+		let portalElem = portalNode.current;
+		if (ownerDocument && portalElem) {
+			let parent = root ? ownerDocument.querySelector(root) || ownerDocument.body : ownerDocument.body;
+			const node = ownerDocument.createElement(type);
+			portalElem = node;
+			parent.appendChild(node);
+			forceUpdate();
 
-      return () => {
-        parent.removeChild(node);
-      };
-    }
-  }, []);
+			return () => {
+				parent.removeChild(node);
+			};
+		}
+	}, []);
 
-  if (!portalNode.current) {
-    return <div ref={mountNode} />;
-  } else {
-    return createPortal(children, portalNode.current);
-  }
+	if (!portalNode.current) {
+		return <div ref={mountNode} />;
+	} else {
+		return createPortal(children, portalNode.current);
+	}
 }