@galaxy-ds/core 1.1.81 → 2.0.0

package/src/ListItemHoverContent/ListItemHoverContent.stories.mdx

@@ -0,0 +1,39 @@
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+import ListItemHoverContent from "./ListItemHoverContent";
+import Typography from "../Typography/Typography";
+import { IconButton } from "../IconButton";
+import { Icon } from "../Icon";
+import { SvgMoreVerticalIcon } from "../Icons/lawconnect/";
+
+<Meta
+  title="components/Lists/ListItemHoverContent"
+  component={ListItemHoverContent}
+/>
+
+# ListItemHoverContent
+
+ListItemHoverContent accepts 2 props: `hideOnHover` and `showOnHover`, which respectively hidden and shown when hovering.
+The component has the width of the larger content, therefore it helps sibling text element truncation works properly, and prevents text overlapping.
+It can be used inside ListItem.
+
+<Canvas withToolbar>
+  <Story name="Default" args={{}}>
+    {(args) => (
+      <ListItemHoverContent
+        hideOnHover={
+          <Typography component="span" variant="caption">
+            $350
+          </Typography>
+        }
+        showOnHover={
+          <IconButton size="small">
+            <Icon name={SvgMoreVerticalIcon} fontSize="small" />
+          </IconButton>
+        }
+        {...args}
+      />
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/ListItemHoverContent/ListItemHoverContent.styled.tsx

@@ -0,0 +1,27 @@
+import { styled } from '@mui/material/styles';
+
+export const HoverContentWrapper = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'width',
+})<{ width: number }>(({ width }) => ({
+  position: 'relative',
+  width: width,
+  '&:hover .hide-on-hover': {
+    opacity: 0,
+  },
+  '&:hover .show-on-hover': {
+    opacity: 1,
+  },
+}));
+
+export const ShowOnHover = styled('div')({
+  opacity: 0,
+  position: 'absolute',
+  right: 16,
+  zIndex: 99,
+});
+
+export const HideOnHover = styled('div')({
+  opacity: 1,
+  position: 'absolute',
+  right: 16,
+});

package/src/ListItemHoverContent/ListItemHoverContent.tsx

@@ -0,0 +1,39 @@
+import React, { useRef, useEffect, useState } from "react";
+
+import { ListItemHoverContentProps } from "./ListItemHoverContent.types";
+import { HoverContentWrapper, HideOnHover, ShowOnHover } from "./ListItemHoverContent.styled";
+
+const ListItemHoverContent: React.FC<ListItemHoverContentProps> = ({
+  hideOnHover,
+  showOnHover,
+}: ListItemHoverContentProps) => {
+  /**
+   * As child divs are absolute positioning, the parent container doesn't have a width.
+   * It can lead to sibling list text truncate incorrectly and text overlapping.
+   * The following code uses refs to get the widths of the contents,
+   * and set the bigger one as parent's width.
+   */
+  const contentRef1 = useRef<HTMLInputElement>(null);
+  const contentRef2 = useRef<HTMLInputElement>(null);
+  const [width, setWidth] = useState(24);
+
+  useEffect(() => {
+    if (!contentRef1.current || !contentRef2.current) return;
+    const width1 = contentRef1.current.clientWidth;
+    const width2 = contentRef2.current.clientWidth;
+    setWidth(width1 > width2 ? width1 : width2);
+  }, [contentRef1, contentRef2]);
+
+  return (
+    <HoverContentWrapper width={width}>
+      <HideOnHover ref={contentRef1} className="hide-on-hover">
+        {hideOnHover}
+      </HideOnHover>
+      <ShowOnHover ref={contentRef2} className="show-on-hover">
+        {showOnHover}
+      </ShowOnHover>
+    </HoverContentWrapper>
+  );
+};
+
+export default ListItemHoverContent;

package/src/ListItemHoverContent/ListItemHoverContent.types.ts

@@ -0,0 +1,10 @@
+export interface ListItemHoverContentProps {
+  /**
+   * Content that hidden when list item on hover
+   */
+  hideOnHover?: React.ReactNode;
+  /**
+   * Content that show when list item on hover
+   */
+  showOnHover?: React.ReactNode;
+}

package/src/ListItemHoverContent/index.ts

@@ -0,0 +1,2 @@
+export * from "./ListItemHoverContent"
+export * from "./ListItemHoverContent.types"

package/src/ListItemIcon/ListItemIcon.stories.mdx

@@ -0,0 +1,21 @@
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+import ListItemIcon from "./ListItemIcon";
+import AttachmentIcon from "../AttachmentIcon/AttachmentIcon";
+
+<Meta title="components/Lists/List Item Icon" component={ListItemIcon} />
+
+# ListItemIcon
+
+ListItemIcon ....
+
+<Canvas withToolbar>
+  <Story name="Default" args={{}}>
+    {(args) => (
+      <ListItemIcon>
+        <AttachmentIcon ext="default" />
+      </ListItemIcon>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/ListItemIcon/ListItemIcon.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { ListItemIconProps } from "./ListItemIcon.types";
+import { ListItemIcon as MuiListItemIcon } from "@mui/material";
+
+export const ListItemIcon: React.FC<ListItemIconProps> = ({
+  children,
+  ...rest
+}: ListItemIconProps) => {
+  return <MuiListItemIcon {...rest}>{children}</MuiListItemIcon>;
+};
+
+export default ListItemIcon;

package/src/ListItemIcon/ListItemIcon.types.ts

@@ -0,0 +1,6 @@
+import { ListItemIconProps as MuiListItemIconProps } from "@mui/material";
+
+export interface ListItemIconProps extends MuiListItemIconProps {
+  children: any;
+  classes?: any;
+}

package/src/ListItemIcon/index.ts

@@ -0,0 +1,2 @@
+export * from "./ListItemIcon"
+export * from "./ListItemIcon.types"

package/src/ListItemText/ListItemText.stories.mdx

@@ -0,0 +1,45 @@
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+import ListItemText from "./ListItemText";
+
+<Meta title="components/Lists/List Item Text" component={ListItemText} />
+
+# List Item Text
+
+<Canvas withToolbar>
+  <Story name="Default" args={{}}>
+    {(args) => <ListItemText {...args}>List Item Text</ListItemText>}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+
+## Stories
+
+### Secondary Text
+
+<Canvas>
+  <Story
+    name="Secondary Text"
+    args={{ primary: "Primary Text", secondary: "Secondary Text" }}
+  >
+    {(args) => <ListItemText {...args} />}
+  </Story>
+</Canvas>
+
+### Text Truncate
+
+<Canvas>
+  <Story
+    name="Truncate"
+    args={{
+      primaryTypographyProps: { noWrap: true },
+      primary: "Very long text will get truncated if it is overflow",
+    }}
+  >
+    {(args) => (
+      <div style={{ maxWidth: 160 }}>
+        <ListItemText {...args} />
+      </div>
+    )}
+  </Story>
+</Canvas>

package/src/ListItemText/ListItemText.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+import { ListItemText as MuiListItemText } from "@mui/material";
+import { ListItemTextProps } from "./ListItemText.types";
+
+export const ListItemText: React.FC<ListItemTextProps> = (
+  props: ListItemTextProps
+) => {
+  return <MuiListItemText {...props} />;
+};
+
+export default ListItemText;

package/src/ListItemText/ListItemText.types.ts

@@ -0,0 +1,2 @@
+import { ListItemTextProps as MuiListItemTextProps } from "@mui/material";
+export interface ListItemTextProps extends MuiListItemTextProps {}

package/src/ListItemText/index.ts

@@ -0,0 +1,2 @@
+export * from "./ListItemText"
+export * from "./ListItemText.types"

package/src/ListSubheader/ListSubheader.stories.mdx

@@ -0,0 +1,24 @@
+import { Meta, Story, Canvas, ArgsTable, Preview } from '@storybook/addon-docs';
+import ListSubheader from './ListSubheader';
+
+<Meta
+  title="Components/Lists/List Subheader"
+  component={ListSubheader}
+/>
+
+# List Subheader
+
+`ListSubheader` can be used for grouping list items, menu items into smaller chunks,
+makes it's easier to scan and find the right item.
+
+```javascript
+import ListSubheader from "@galaxy-ds/core";
+```
+
+<Preview withToolbar>
+  <Story name="Default" args={{}}>
+    {args => <ListSubheader {...args}>Sub Header</ListSubheader>}
+  </Story>
+</Preview>
+
+<ArgsTable of={ListSubheader} />

package/src/ListSubheader/ListSubheader.test.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import ListSubheader from "./ListSubheader";
+import { ListSubheaderProps } from "./ListSubheader.types";
+
+describe("ListSubheader", () => {
+  let props: ListSubheaderProps;
+  test("renders ListSubheader component", () => {
+    render(<ListSubheader {...props} />);
+  });
+});

package/src/ListSubheader/ListSubheader.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { ListSubheader as MuiListSubheader } from "@mui/material";
+
+import { ListSubheaderProps } from "./ListSubheader.types";
+
+export const ListSubheader: React.FC<ListSubheaderProps> = (
+  props: ListSubheaderProps
+) => {
+  const { children, ...rest } = props;
+  return <MuiListSubheader {...rest}>{children}</MuiListSubheader>;
+};
+
+export default ListSubheader;

package/src/ListSubheader/ListSubheader.types.ts

@@ -0,0 +1,7 @@
+import { ListSubheaderProps as MuiListSubheaderProps } from "@mui/material";
+export interface ListSubheaderProps extends MuiListSubheaderProps {
+  /**
+   * Sub header content
+   */
+  children: React.ReactNode;
+}

package/src/ListSubheader/index.ts

@@ -0,0 +1,2 @@
+export * from "./ListSubheader"
+export * from "./ListSubheader.types"

package/src/Loader/Icons/Loader.tsx

@@ -0,0 +1,40 @@
+import React from "react"
+
+import { SvgIcon, SvgIconProps } from "@mui/material"
+
+export default function LoaderIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 30">
+      <circle r="3" transform="translate(2 15)">
+        <animate
+          attributeName="opacity"
+          values="1;.2; 1"
+          begin="0"
+          dur="1.2s"
+          calcMode="paced"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle r="3" transform="translate(12 15)">
+        <animate
+          attributeName="opacity"
+          values="1;.2; 1"
+          begin="0.3s"
+          dur="1.2s"
+          calcMode="paced"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle r="3" transform="translate(22 15)">
+        <animate
+          attributeName="opacity"
+          values="1;.2; 1"
+          begin=".6"
+          dur="1.2s"
+          calcMode="paced"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </SvgIcon>
+  )
+}

package/src/Loader/Icons/Spinner.tsx

@@ -0,0 +1,82 @@
+import React from "react"
+
+import { SvgIcon, SvgIconProps } from "@mui/material"
+
+export default function SpinnerIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props} viewBox="0 0 120 120">
+      <g transform="rotate(-90 43 -17)">
+        <circle cx="0" cy="0" r="8">
+          <animateTransform
+            id="b"
+            attributeName="transform"
+            dur="0.2s"
+            type="translate"
+            values="0 0; 14 0; 0 0"
+            begin="0;a.end"
+          />
+        </circle>
+      </g>
+      <g transform="rotate(-30 124.962 -145.406)">
+        <circle cx="0" cy="0" r="8">
+          <animateTransform
+            id="c"
+            attributeName="transform"
+            dur="0.2s"
+            type="translate"
+            values="0 0; 14 0; 0 0"
+            begin="b.end"
+          />
+        </circle>
+      </g>
+      <g transform="rotate(30 -98.962 205.406)">
+        <circle cx="0" cy="0" r="8">
+          <animateTransform
+            id="d"
+            attributeName="transform"
+            dur="0.2s"
+            type="translate"
+            values="0 0; 14 0; 0 0"
+            begin="c.end"
+          />
+        </circle>
+      </g>
+      <g transform="rotate(90 -17 77)">
+        <circle cx="0" cy="0" r="8">
+          <animateTransform
+            id="e"
+            attributeName="transform"
+            dur="0.2s"
+            type="translate"
+            values="0 0; 14 0; 0 0"
+            begin="d.end-0.02s"
+          />
+        </circle>
+      </g>
+      <g transform="rotate(150 4.962 42.594)">
+        <circle cx="0" cy="0" r="8">
+          <animateTransform
+            id="f"
+            attributeName="transform"
+            dur="0.2s"
+            type="translate"
+            values="0 0; 14 0; 0 0"
+            begin="e.end"
+          />
+        </circle>
+      </g>
+      <g transform="rotate(-150 21.038 17.406)">
+        <circle cx="0" cy="0" r="8">
+          <animateTransform
+            id="a"
+            attributeName="transform"
+            dur="0.2s"
+            type="translate"
+            values="0 0; 14 0; 0 0"
+            begin="f.end"
+          />
+        </circle>
+      </g>
+    </SvgIcon>
+  )
+}

package/src/Loader/Loader.stories.mdx

@@ -0,0 +1,21 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
+
+import { Loader } from "./Loader"
+
+<Meta title="components/Loader" component={Loader} />
+
+# Loader
+
+<Canvas withToolbar>
+  <Story name="Default" args={{ open: true, position: "relative", transparent: true }}>
+    {(args) => <Loader {...args} />}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+
+<Canvas withToolbar>
+  <Story name="Spinner" args={{ open: true, position: "relative", transparent: true }}>
+    {(args) => <Loader spinner {...args} />}
+  </Story>
+</Canvas>

package/src/Loader/Loader.styled.tsx

@@ -0,0 +1,8 @@
+import { Backdrop } from "@mui/material"
+import { styled } from "@mui/material/styles"
+
+export const LoaderContainer = styled(Backdrop)(() => ({
+  "& .MuiSvgIcon-root": {
+    zIndex: 99,
+  },
+}))

package/src/Loader/Loader.test.tsx

@@ -0,0 +1,9 @@
+import { render } from "@testing-library/react"
+
+import { Loader } from "./Loader"
+
+describe("Loader test", () => {
+  it("renders without crashing", () => {
+    render(<Loader open={true} />)
+  })
+})

package/src/Loader/Loader.tsx

@@ -0,0 +1,30 @@
+import LoaderIcon from "./Icons/Loader"
+import SpinnerIcon from "./Icons/Spinner"
+import { LoaderContainer } from "./Loader.styled"
+import { LoaderProps } from "./Loader.types"
+
+export const Loader = (props: LoaderProps) => {
+  const { background, transparent, spinner, position = "fixed", ...rest } = props
+  return (
+    <LoaderContainer
+      sx={{
+        position,
+        zIndex: (theme) => theme.zIndex.drawer + 1,
+        backgroundColor: transparent
+          ? background === "dark"
+            ? "rgba(38,48,66, 0.3)"
+            : "rgba(225,225,225, 0.3)"
+          : background === "dark"
+          ? (theme) => theme.palette.text.secondary
+          : (theme) => theme.palette.grey[50],
+        color: background === "dark" ? "#ffffff" : "text.primary",
+      }}
+      {...rest}
+      open={props.open}
+    >
+      {spinner ? <SpinnerIcon color="inherit" /> : <LoaderIcon color="inherit" />}
+    </LoaderContainer>
+  )
+}
+
+export default Loader

package/src/Loader/Loader.types.tsx

@@ -0,0 +1,7 @@
+export type LoaderProps = {
+  spinner?: boolean
+  background?: "light" | "dark"
+  position?: "fixed" | "absolute" | "relative"
+  transparent?: boolean
+  open: boolean
+}

package/src/Loader/index.ts

@@ -0,0 +1,2 @@
+export * from "./Loader"
+export * from "./Loader.types"

package/src/Logos/LawConnect/LawConnectIcon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+function SvgLawConnectIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 100 100"
+      width={props.width}
+      height={props.height}
+    >
+      <path
+        d="M49.725 100a49.724 49.724 0 110-99.45v23.906a25.836 25.836 0 1025.836 25.85v-.03h23.905A49.68 49.68 0 0149.82 100h-.094z"
+        fill="currentColor"
+      />
+      <path
+        d="M82.713 34.018c9.241 0 16.733-7.492 16.733-16.734 0-9.241-7.492-16.733-16.733-16.733-9.242 0-16.734 7.492-16.734 16.733 0 9.242 7.492 16.734 16.734 16.734z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default SvgLawConnectIcon;

package/src/Logos/LawConnect/LawConnectLogo.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+function SvgLawConnectLogo(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 300 42"
+      width={props.width}
+      height={props.height}
+    >
+      <path
+        d="M21.015 41.49a20.489 20.489 0 110-40.98v9.85a10.646 10.646 0 1010.639 10.652V21h9.851a20.473 20.473 0 01-20.457 20.49h-.033z"
+        fill="#0E5FE3"
+      />
+      <path
+        d="M34.609 14.3a6.895 6.895 0 100-13.79 6.895 6.895 0 000 13.79z"
+        fill="#0E5FE3"
+      />
+      <path
+        d="M54.578 36.882V4.478h5.93v27.537h15.124v4.867H54.578zM130.609 14.402h5.608l-8.829 22.48h-5.007l-5.517-14.48-5.377 14.48h-4.96l-8.872-22.48h5.884l5.741 15.638 5.746-15.63h4.137l5.747 15.721 5.699-15.729zM171.719 35.825a9.85 9.85 0 01-4.022-4.091c-.951-1.778-1.426-3.847-1.425-6.207.001-2.36.476-4.421 1.425-6.182a9.875 9.875 0 014.022-4.07c1.732-.95 3.747-1.424 6.046-1.423 2.298 0 4.313.475 6.044 1.424a9.743 9.743 0 013.999 4.07c.935 1.76 1.402 3.821 1.402 6.18 0 2.36-.467 4.43-1.402 6.208a9.718 9.718 0 01-3.999 4.091c-1.731.95-3.746 1.425-6.044 1.424-2.299 0-4.314-.475-6.046-1.424zm10.275-4.867c.98-1.226 1.47-3.034 1.47-5.424 0-2.359-.49-4.16-1.47-5.402s-2.39-1.862-4.229-1.86c-1.839 0-3.257.62-4.253 1.86-.997 1.24-1.495 3.041-1.494 5.402 0 2.39.491 4.198 1.472 5.424.98 1.225 2.39 1.838 4.229 1.838 1.867-.004 3.292-.618 4.275-1.844v.006zM210.724 16.15c1.318 1.532 1.976 3.846 1.976 6.942v13.79h-5.746v-13.47c0-1.746-.329-3.018-.988-3.815-.658-.798-1.692-1.196-3.104-1.195-1.654 0-2.98.521-3.976 1.563-.995 1.042-1.493 2.437-1.493 4.184v12.733h-5.747v-22.48h5.609v3.356a7.773 7.773 0 013.079-2.895c1.288-.675 2.744-1.012 4.368-1.011 2.695 0 4.702.765 6.022 2.297zM235.086 16.15c1.317 1.532 1.976 3.846 1.978 6.942v13.79h-5.746v-13.47c0-1.746-.33-3.018-.989-3.815-.659-.798-1.694-1.196-3.103-1.195-1.655 0-2.98.521-3.976 1.563-.996 1.042-1.494 2.437-1.494 4.184v12.733h-5.746v-22.48h5.607v3.356a7.777 7.777 0 013.081-2.895c1.288-.675 2.743-1.012 4.367-1.011 2.697 0 4.704.765 6.021 2.297zM94.662 16.15c-1.533-1.532-3.877-2.298-7.033-2.298-1.714.018-3.416.28-5.056.78-1.733.509-3.216 1.148-4.45 1.916l3.15 3.153a18.427 18.427 0 012.198-.862 12.348 12.348 0 013.744-.62c1.532 0 2.628.337 3.286 1.01.658.675.988 1.778.989 3.31v1.057H90.34c-3.338 0-5.958.215-7.86.644-1.903.43-3.274 1.119-4.115 2.068-.843.95-1.264 2.253-1.264 3.908a6.384 6.384 0 001.057 3.586 7.26 7.26 0 002.896 2.528 9.013 9.013 0 004.092.92c1.471 0 2.766-.338 3.884-1.012a5.998 5.998 0 002.459-2.803v3.447h5.47V23.225c0-3.185-.765-5.543-2.298-7.076zM91.49 27.595c0 1.625-.483 2.95-1.448 3.976-.965 1.027-2.214 1.54-3.746 1.54-1.043 0-1.9-.314-2.575-.942a3.151 3.151 0 01-1.01-2.408c0-.796.245-1.424.735-1.885.49-.46 1.303-.782 2.436-.965 1.134-.185 2.728-.278 4.78-.278h.835l-.007.962z"
+        fill="#191919"
+      />
+      <path
+        d="M162.99 30.131a14.739 14.739 0 01-2.964 1.53 13.074 13.074 0 01-4.598.806c-3.126 0-5.539-1.012-7.24-3.035-1.7-2.023-2.551-4.95-2.551-8.78 0-3.801.85-6.713 2.551-8.735 1.702-2.022 4.115-3.034 7.24-3.034a13.097 13.097 0 014.598.805c1.046.398 2.042.914 2.971 1.538l3.337-3.338c-1.311-1.205-2.923-2.145-4.838-2.819a18.54 18.54 0 00-6.155-1.01c-3.188 0-5.969.682-8.344 2.046a13.686 13.686 0 00-5.47 5.793c-1.271 2.497-1.907 5.418-1.908 8.761-.001 3.344.635 6.27 1.908 8.78a13.647 13.647 0 005.47 5.81c2.375 1.364 5.156 2.046 8.344 2.046a18.539 18.539 0 006.159-1.011c1.911-.667 3.522-1.605 4.833-2.813l-3.343-3.34zM257.026 31.408a10.62 10.62 0 01-5.371 1.428c-1.992 0-3.522-.505-4.589-1.517-1.067-1.011-1.696-2.559-1.886-4.642h15.298v-1.61c0-3.493-.896-6.236-2.689-8.228-1.792-1.992-4.233-2.988-7.324-2.987-2.116 0-4.008.49-5.677 1.47a10.04 10.04 0 00-3.886 4.137c-.919 1.777-1.379 3.817-1.378 6.12 0 3.615 1.066 6.466 3.199 8.55 2.132 2.086 5.036 3.128 8.711 3.126a15.082 15.082 0 004.758-.782c1.552-.511 2.844-1.187 3.877-2.025l-3.043-3.04zm-10.128-12.04c.934-.98 2.168-1.471 3.7-1.472 1.533-.001 2.728.482 3.585 1.45.859.964 1.319 2.381 1.38 4.25H245.18c.21-1.838.782-3.248 1.718-4.229zM277.194 32.147a8.87 8.87 0 01-3.149.598c-1.992 0-3.54-.621-4.643-1.862-1.104-1.242-1.655-3.012-1.655-5.31 0-2.328.551-4.113 1.655-5.355 1.103-1.241 2.651-1.861 4.643-1.86a8.905 8.905 0 013.149.598c.535.202 1.052.448 1.546.735l3.075-3.075c-.914-.834-2.119-1.502-3.616-2.005a14.645 14.645 0 00-4.666-.758c-2.328 0-4.382.49-6.159 1.47-1.75.953-3.18 2.4-4.114 4.161-.966 1.792-1.449 3.853-1.449 6.183 0 2.33.46 4.37 1.38 6.12a9.636 9.636 0 003.976 4.045c1.731.95 3.777 1.425 6.137 1.424 1.624.006 3.238-.25 4.78-.758 1.489-.49 2.717-1.162 3.685-2.016l-3.059-3.053c-.485.28-.992.52-1.516.718zM298.461 32.84c-.582.058-1.143.087-1.685.088-2.789 0-4.184-1.501-4.183-4.504v-9.7h5.868v-4.322h-5.868V7.691h-5.746v6.711h-4.321v4.321h4.321v9.787c0 2.88.751 5.049 2.253 6.504 1.502 1.456 3.831 2.184 6.987 2.184.721 0 1.514-.04 2.374-.124v-4.235z"
+        fill="#191919"
+      />
+    </svg>
+  );
+}
+
+export default SvgLawConnectLogo;

package/src/Logos/LawConnect/LawConnectPoweredBy.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+function SvgLawConnectPoweredBy(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 180 31"
+      width={`${props.width}`}
+      height={`${props.height}`}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <path
+        d="M10.397 30.235A10.135 10.135 0 01.176 20.097 10.138 10.138 0 0110.397 9.96v4.873a5.267 5.267 0 105.264 5.27v-.006h4.874a10.13 10.13 0 01-10.121 10.138h-.017z"
+        fill="#0E5FE3"
+      />
+      <path
+        d="M17.123 16.782a3.412 3.412 0 100-6.823 3.412 3.412 0 000 6.823z"
+        fill="#0E5FE3"
+      />
+      <path
+        d="M27.004 27.954V11.922h2.934v13.624h7.483v2.408H27.004zM64.621 16.833h2.775l-4.369 11.121H60.55l-2.73-7.163-2.66 7.163h-2.454l-4.39-11.122h2.912l2.843 7.733 2.843-7.733h2.047l2.843 7.779 2.817-7.778zM84.961 27.432a4.873 4.873 0 01-1.99-2.024c-.47-.88-.705-1.903-.705-3.07 0-1.169.236-2.188.705-3.06a4.89 4.89 0 011.99-2.012c.857-.47 1.854-.704 2.991-.705 1.138 0 2.134.235 2.99.705a4.823 4.823 0 011.98 2.013c.462.872.693 1.891.693 3.058 0 1.168-.231 2.192-.693 3.071a4.808 4.808 0 01-1.98 2.025c-.856.47-1.852.704-2.99.705-1.137 0-2.134-.235-2.99-.706zm5.084-2.408c.485-.607.727-1.501.727-2.684 0-1.167-.242-2.057-.727-2.672-.485-.614-1.183-.921-2.093-.921-.91 0-1.61.307-2.104.921-.493.615-.74 1.505-.739 2.672 0 1.183.243 2.077.728 2.684.486.606 1.183.91 2.093.91.923-.003 1.629-.307 2.115-.913v.003zM104.26 17.697c.652.759.978 1.904.978 3.435v6.822h-2.844v-6.663c0-.864-.162-1.494-.488-1.888-.326-.394-.838-.59-1.536-.591-.819 0-1.474.258-1.967.773-.493.516-.74 1.206-.74 2.07v6.3h-2.842V16.832h2.775v1.66a3.846 3.846 0 011.523-1.432c.637-.334 1.358-.5 2.161-.5 1.333 0 2.327.378 2.98 1.136zM116.313 17.697c.652.759.978 1.904.979 3.435v6.822h-2.843v-6.663c0-.864-.163-1.494-.49-1.888-.326-.394-.837-.59-1.535-.591-.818 0-1.474.258-1.967.773-.493.516-.739 1.206-.739 2.07v6.3h-2.843V16.832h2.774v1.66a3.852 3.852 0 011.524-1.432c.638-.334 1.358-.5 2.161-.5 1.334 0 2.327.378 2.979 1.136zM46.836 17.697c-.758-.758-1.918-1.137-3.48-1.137a8.888 8.888 0 00-2.502.385c-.857.25-1.59.567-2.201.947l1.559 1.56a9.106 9.106 0 011.087-.426 6.128 6.128 0 011.854-.307c.758 0 1.3.166 1.626.5.325.333.488.88.489 1.638v.523h-.569c-1.65 0-2.947.106-3.889.318-.94.212-1.62.555-2.037 1.027-.417.47-.625 1.114-.625 1.932-.007.63.175 1.248.523 1.774.357.537.852.968 1.433 1.248a4.46 4.46 0 002.024.455c.728 0 1.369-.167 1.922-.5a2.968 2.968 0 001.216-1.388v1.708h2.707V21.2c0-1.577-.379-2.745-1.137-3.503zm-1.57 5.663c0 .804-.238 1.46-.716 1.968-.477.508-1.095.762-1.853.762-.516 0-.94-.155-1.274-.466-.334-.311-.5-.71-.5-1.195 0-.393.121-.704.364-.932.242-.228.644-.387 1.205-.478.561-.091 1.35-.137 2.365-.137h.413l-.004.478z"
+        fill="#191919"
+      />
+      <path
+        d="M80.642 24.615c-.459.307-.95.56-1.466.757a6.48 6.48 0 01-2.275.397c-1.547 0-2.74-.5-3.582-1.5-.841-1.002-1.262-2.45-1.263-4.345 0-1.88.421-3.321 1.263-4.322.842-1 2.036-1.5 3.582-1.5a6.48 6.48 0 012.275.397 7.31 7.31 0 011.47.761l1.651-1.65c-.649-.6-1.447-1.065-2.394-1.396a9.193 9.193 0 00-3.045-.498c-1.577 0-2.953.337-4.129 1.012a6.772 6.772 0 00-2.706 2.866c-.629 1.235-.943 2.68-.944 4.334 0 1.654.314 3.102.944 4.344a6.753 6.753 0 002.706 2.875c1.175.676 2.551 1.014 4.129 1.014a9.178 9.178 0 003.047-.501c.946-.33 1.743-.794 2.391-1.392l-1.654-1.653zM127.168 25.247a5.251 5.251 0 01-2.657.706c-.986 0-1.743-.25-2.271-.75-.528-.501-.839-1.267-.933-2.297h7.569v-.796c0-1.729-.443-3.086-1.33-4.072-.887-.986-2.095-1.478-3.624-1.478-1.047 0-1.983.243-2.809.728a4.963 4.963 0 00-1.922 2.047c-.455.88-.683 1.889-.682 3.028 0 1.789.527 3.199 1.582 4.23 1.055 1.031 2.492 1.547 4.31 1.547a7.458 7.458 0 002.354-.387c.768-.254 1.408-.588 1.919-1.002l-1.506-1.505zm-5.011-5.958c.462-.485 1.073-.727 1.831-.727s1.349.239 1.774.716c.425.478.652 1.179.682 2.104h-5.137c.104-.91.387-1.608.85-2.093zM137.147 25.615a4.387 4.387 0 01-1.558.296c-.986 0-1.751-.308-2.297-.922-.546-.614-.819-1.49-.819-2.626 0-1.152.273-2.036.819-2.65.546-.614 1.311-.921 2.297-.921a4.404 4.404 0 011.558.295c.265.1.52.222.765.364l1.521-1.52c-.452-.414-1.048-.744-1.789-.993a7.258 7.258 0 00-2.308-.375c-1.152 0-2.168.243-3.048.728a5.024 5.024 0 00-2.035 2.058c-.478.887-.717 1.907-.717 3.06 0 1.152.228 2.16.683 3.027a4.766 4.766 0 001.967 2.001c.856.47 1.868.705 3.036.706a7.486 7.486 0 002.365-.376c.737-.243 1.345-.575 1.824-.998l-1.514-1.51c-.24.139-.491.258-.75.356zM147.669 25.955a8.173 8.173 0 01-.834.044c-1.38 0-2.07-.743-2.069-2.229v-4.8h2.903v-2.137h-2.903v-3.32h-2.843v3.32h-2.138v2.138h2.138v4.844c0 1.426.371 2.499 1.114 3.218.743.72 1.896 1.08 3.457 1.081.357 0 .749-.02 1.175-.06v-2.1zM27.004.765h3.638c.89 0 1.584.223 2.08.668.496.445.744 1.07.744 1.872 0 .804-.248 1.43-.744 1.879-.497.448-1.19.673-2.08.673h-2.114v3.238h-1.524V.765zm3.45 3.922c1.047 0 1.57-.457 1.57-1.37 0-.465-.129-.809-.389-1.033-.26-.224-.653-.337-1.181-.34h-1.927v2.744l1.927-.001zM35.126 8.826c-.44-.24-.8-.607-1.032-1.052-.245-.458-.367-.99-.367-1.595.001-.604.123-1.134.367-1.59a2.546 2.546 0 011.032-1.045c.444-.244.962-.366 1.553-.366a3.188 3.188 0 011.554.366A2.51 2.51 0 0139.26 4.59c.241.453.361.983.36 1.59 0 .606-.12 1.137-.36 1.594-.229.446-.587.812-1.027 1.052-.445.244-.963.366-1.554.366-.59 0-1.108-.123-1.553-.366zm2.64-1.253c.252-.315.378-.78.378-1.394 0-.607-.126-1.07-.378-1.388-.252-.319-.615-.48-1.087-.482-.472 0-.837.16-1.093.482-.256.32-.384.783-.384 1.386 0 .613.126 1.078.379 1.394.252.315.614.473 1.086.472.481 0 .847-.157 1.099-.472v.002zM48.246 3.317h1.445l-2.27 5.78h-1.29l-1.418-3.722-1.382 3.722h-1.276l-2.28-5.78h1.513l1.478 4.017 1.477-4.017h1.063l1.477 4.04 1.463-4.04zM55.24 6.472h-3.934c.046.535.207.933.482 1.193s.67.39 1.181.39c.636 0 1.253-.216 1.749-.614l.426 1.016a3.105 3.105 0 01-1.011.531 3.87 3.87 0 01-1.22.201c-.945 0-1.691-.268-2.239-.803-.548-.535-.821-1.268-.82-2.198a3.375 3.375 0 01.354-1.571c.223-.443.57-.813.998-1.063a2.821 2.821 0 011.46-.379c.795 0 1.423.256 1.883.768.46.512.691 1.217.692 2.115v.414zm-3.49-1.879c-.24.252-.389.614-.444 1.087h2.67c-.015-.48-.133-.845-.354-1.093-.22-.248-.527-.372-.922-.371-.393 0-.71.125-.95.377zM60.014 4.404l-.863.083c-.976.102-1.465.598-1.465 1.489v3.119H56.21v-5.78h1.406v1.018c.3-.692.919-1.07 1.858-1.134l.449-.035.092 1.24zM65.505 6.472h-3.932c.046.535.206.933.482 1.193.275.26.669.39 1.182.39.636 0 1.253-.216 1.748-.614l.425 1.016a3.1 3.1 0 01-1.006.531c-.394.132-.807.2-1.223.201-.945 0-1.692-.268-2.239-.803-.547-.535-.821-1.268-.822-2.198a3.367 3.367 0 01.355-1.571c.223-.443.57-.813.997-1.063a2.821 2.821 0 011.46-.379c.798 0 1.426.255 1.885.765.458.51.688 1.215.688 2.115v.417zm-3.489-1.879c-.24.252-.388.614-.443 1.087h2.67c-.015-.48-.133-.845-.354-1.093-.22-.248-.528-.372-.921-.371-.394 0-.712.125-.952.377zM71.994.765v8.33h-1.467V8.16c-.17.32-.431.584-.75.757-.342.186-.727.28-1.116.275a2.397 2.397 0 01-1.33-.378 2.511 2.511 0 01-.91-1.069 3.695 3.695 0 01-.324-1.59c0-.598.108-1.122.325-1.57a2.382 2.382 0 012.239-1.407c.385-.008.767.08 1.11.256.314.166.573.42.744.733V.765h1.479zm-1.85 6.794c.256-.323.383-.784.383-1.382 0-.599-.128-1.057-.383-1.377-.257-.318-.617-.478-1.082-.481-.472 0-.84.157-1.1.473-.261.315-.392.767-.39 1.358 0 .596.13 1.06.39 1.394.26.333.622.498 1.086.497.475.001.84-.16 1.097-.482zM80.784 3.541c.394.254.708.615.904 1.04.216.45.325.973.325 1.572.01.547-.1 1.09-.325 1.589-.195.435-.51.806-.908 1.07a2.394 2.394 0 01-1.329.377 2.266 2.266 0 01-1.116-.275 1.842 1.842 0 01-.75-.757v.934H76.13V.765h1.477v3.39c.17-.31.43-.564.745-.726.34-.174.718-.26 1.1-.254.47-.008.932.12 1.331.366zm-.638 4.006c.26-.33.39-.795.39-1.394 0-.59-.128-1.044-.384-1.359-.256-.315-.62-.472-1.092-.472-.473 0-.837.16-1.093.481-.255.321-.383.78-.384 1.376 0 .599.128 1.06.384 1.383.256.323.62.483 1.093.481.464 0 .826-.165 1.086-.496zM86.892 3.329h1.457l-3.474 7.893h-1.488L84.44 8.87 82.03 3.33h1.56l1.63 4.076 1.672-4.076z"
+        fill="#191919"
+      />
+    </svg>
+  );
+}
+
+export default SvgLawConnectPoweredBy;

package/src/Logos/LawConnect/index.tsx

@@ -0,0 +1,3 @@
+export { default as SvgLawConnectLogo } from "./LawConnectLogo"
+export { default as SvgLawConnectIcon } from "./LawConnectIcon"
+export { default as SvgLawConnectPoweredBy } from "./LawConnectPoweredBy"

package/src/Logos/Leap/LawconnectIcon.tsx

@@ -0,0 +1,19 @@
+import React, { SVGProps } from 'react';
+
+export default function LawconnectIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 141 140"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.163 119.104a69.739 69.739 0 0049.313 20.426h.133a69.68 69.68 0 0064.35-43.067 69.663 69.663 0 005.281-26.673h-33.528v.042a36.23 36.23 0 01-22.382 33.464 36.236 36.236 0 11-13.853-69.718V.05a69.74 69.74 0 00-49.314 119.054zm119.049-95.585c0 12.962-10.507 23.47-23.469 23.47-12.962 0-23.47-10.508-23.47-23.47S103.782.049 116.744.049s23.469 10.508 23.469 23.47z"
+        fill="#ecedef"
+      />
+    </svg>
+  );
+}