V2 ToggleCard component (#1468)

libs/icons/src/GasStationFill.tsx

@@ -0,0 +1,12 @@
+import { createIcon } from './create-icon';
+import { IconBase } from './types';
+
+const GasStationFill = (props: IconBase) => {
+  return createIcon({
+    ...props,
+    d: 'M3 19V4C3 3.44772 3.44772 3 4 3H13C13.5523 3 14 3.44772 14 4V12H16C17.1046 12 18 12.8954 18 14V18C18 18.5523 18.4477 19 19 19C19.5523 19 20 18.5523 20 18V11H18C17.4477 11 17 10.5523 17 10V6.41421L15.3431 4.75736L16.7574 3.34315L21.7071 8.29289C21.9024 8.48816 22 8.74408 22 9V18C22 19.6569 20.6569 21 19 21C17.3431 21 16 19.6569 16 18V14H14V19H15V21H2V19H3ZM5 5V11H12V5H5Z',
+    displayName: 'GasStationFill',
+  });
+};
+
+export default GasStationFill;

libs/icons/src/index.ts

@@ -26,12 +26,10 @@ export * from './CloseCircleLineIcon';
 export * from './CoinIcon';
 export * from './Common2Icon';
 export * from './CommonWealth';
-export * from './Copyright';
-export * from './CornerDownRightLine';
-export * from './CopyLinkFill';
 export * from './ContrastTwoLine';
 export * from './CopyLinkFill';
 export * from './Copyright';
+export * from './CornerDownRightLine';
 export * from './DefaultTokenIcon';
 export * from './DeleteBinIcon';
 export * from './DeleteBinWithBg';
@@ -52,6 +50,7 @@ export * from './FilterIcon2';
 export * from './FlaskLineIcon';
 export * from './FoldersFillIcon';
 export * from './ForumIcon';
+export { default as GasStationFill } from './GasStationFill';
 export * from './GithubFill';
 export * from './GraphIcon';
 export * from './GridFillIcon';

libs/webb-ui-components/src/components/ToggleCard/ToggleCard.tsx

@@ -0,0 +1,72 @@
+import { getFlexBasic } from '@webb-tools/icons/utils';
+import { cloneElement, forwardRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Typography } from '../../typography/Typography';
+import { Label } from '../Label';
+import { Switcher } from '../Switcher';
+import { TitleWithInfo } from '../TitleWithInfo';
+import { ToggleCardProps } from './types';
+
+const ToggleCard = forwardRef<HTMLDivElement, ToggleCardProps>(
+  (
+    { className, Icon, title, id, description, info, switcherProps, ...props },
+    ref
+  ) => {
+    return (
+      <div
+        className={twMerge(
+          'px-4 py-2 rounded-lg max-w-md',
+          'bg-[#F7F8F7]/50 hover:bg-mono-20',
+          'dark:bg-mono-180 dark:hover:bg-mono-170',
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        <div className="flex items-center">
+          <div className="flex gap-2 grow">
+            {Icon && (
+              <span
+                className={twMerge(
+                  'grow-0 shrink-0',
+                  getFlexBasic(Icon.props.size)
+                )}
+              >
+                {cloneElement(Icon, {
+                  ...Icon.props,
+                  className: twMerge(Icon.props.className, '!fill-mono-100'),
+                })}
+              </span>
+            )}
+
+            <div className="space-y-2">
+              <Label id={id ?? title}>
+                <TitleWithInfo
+                  title={title}
+                  variant="body1"
+                  info={info}
+                  titleComponent="span"
+                  className="text-mono-180 dark:text-mono-40"
+                  titleClassName="capitalize !text-inherit"
+                />
+              </Label>
+
+              {description && (
+                <Typography
+                  className="text-mono-180 dark:text-mono-40"
+                  variant="body1"
+                >
+                  {description}
+                </Typography>
+              )}
+            </div>
+          </div>
+
+          <Switcher {...switcherProps} />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default ToggleCard;

libs/webb-ui-components/src/components/ToggleCard/index.ts

@@ -0,0 +1,6 @@
+import ToggleCard from './ToggleCard';
+
+export * from './ToggleCard';
+export { default as ToggleCard } from './ToggleCard';
+
+export default ToggleCard;

libs/webb-ui-components/src/components/ToggleCard/types.ts

@@ -0,0 +1,36 @@
+import { IconBase } from '@webb-tools/icons/types';
+import { ComponentPropsWithoutRef } from 'react';
+import { PropsOf } from '../../types';
+import { Switcher } from '../Switcher';
+
+/**
+ * The props for the ToggleCard component
+ */
+export interface ToggleCardProps extends PropsOf<'div'> {
+  /**
+   * The icon to display in the card
+   */
+  Icon?: React.ReactElement<IconBase>;
+
+  /**
+   * The title of the card
+   */
+  title: string;
+
+  /**
+   * The id of the card (default to `title` if not provided)
+   */
+  id?: string;
+
+  /**
+   * The description of the card
+   */
+  description?: string;
+
+  /**
+   * The tooltip to display on hover
+   */
+  info?: string | React.ReactElement;
+
+  switcherProps?: ComponentPropsWithoutRef<typeof Switcher>;
+}

libs/webb-ui-components/src/components/index.ts

@@ -1,24 +1,24 @@
 export * from './Accordion';
+export * from './Alert';
 export * from './AmountMenu';
 export * from './Avatar';
 export * from './AvatarGroup';
-export * from './Alert';
 export * from './Banner';
 export * from './BottomDialog';
 export * from './Breadcrumbs';
 export * from './BridgeInputs';
 export * from './Button';
 export * from './Card';
 export * from './CardTable';
-export * from './ChartContainer';
+export * from './ChainChip';
 export * from './ChainsRing';
+export * from './ChartContainer';
 export * from './CheckBox';
 export * from './CheckBoxMenu';
 export * from './Chip';
 export * from './Collapsible';
 export * from './ConnectWalletMobileButton';
 export * from './CopyWithTooltip';
-export * from './ChainChip';
 export * from './Disclaimer';
 export * from './Divider';
 export * from './Drawer';
@@ -28,8 +28,8 @@ export * from './ErrorFallback';
 export * from './FileUploads';
 export * from './Filter';
 export * from './Footer';
-export * from './IconsGroup';
 export * from './IconWithTooltip';
+export * from './IconsGroup';
 export * from './Input';
 export * from './KeyCard';
 export * from './KeyValueWithButton';
@@ -57,16 +57,18 @@ export * from './Table';
 export * from './TableAndChartTabs';
 export * from './Tabs';
 export * from './TangleLogo';
-export * from './ThemeToggle';
 export * from './ThemeSwitcher';
+export * from './ThemeToggle';
 export * from './TimeLine';
 export * from './TimeProgress';
 export * from './TitleWithInfo';
+export * from './ToggleCard';
+export { default as ToggleCard } from './ToggleCard';
 export * from './TokenPair';
 export * from './TokenPairIcons';
 export * from './TokenSelector';
-export * from './TokensRing';
 export * from './TokenWithAmount';
+export * from './TokensRing';
 export * from './Tooltip';
 export * from './WalletConnectionCard';
 export * from './WebsiteCommunity';

libs/webb-ui-components/src/stories/molecules/ToggleCard.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ToggleCard from '../../components/ToggleCard';
+import GasStationFill from '@webb-tools/icons/GasStationFill';
+
+const meta: Meta<typeof ToggleCard> = {
+  title: 'Design System/V2 (WIP)/Molecules/ToggleCard',
+  component: ToggleCard,
+};
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default meta;
+
+type Story = StoryObj<typeof ToggleCard>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  render: () => <ToggleCard title="Title" />,
+};
+
+export const WithIconAndDescription: Story = {
+  render: () => (
+    <ToggleCard
+      title="Title"
+      description="Description"
+      info="Information"
+      Icon={<GasStationFill size="lg" />}
+    />
+  ),
+};