Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Phosphor icons #92

Merged
merged 9 commits into from
Dec 6, 2023
Merged

Add Phosphor icons #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
70abcf5
Add phosphor icons
aaronshekey Dec 6, 2023
ea48c28
Bump Select
aaronshekey Dec 6, 2023
5c03792
Select icon choices
aaronshekey Dec 6, 2023
96d53ab
Code block icons
aaronshekey Dec 6, 2023
c4d129a
Remove the opacity from the select caret
aaronshekey Dec 6, 2023
668db0c
Be way more specific on Icon import
aaronshekey Dec 6, 2023
883f3a8
Remove @radix-ui/react-icons
aaronshekey Dec 6, 2023
db9070a
Remove lucide-react
aaronshekey Dec 6, 2023
1b8f97e
Update code-block.stories.tsx
aaronshekey Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 9 additions & 13 deletions app/components/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { cx } from "@/cx";
import { Select, SelectContent, SelectIcon, SelectOption, SelectTrigger } from "@/select";
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/select";
import { isTheme, theme, useTheme } from "@/theme-provider";
import { WithStyleProps } from "@/types/with-style-props";
import { Sun } from "@phosphor-icons/react/Sun";
import { Link } from "@remix-run/react";
import { PropsWithChildren, useState } from "react";
import { NavLink } from "./nav-link";
Expand Down Expand Up @@ -59,21 +60,16 @@ export function Layout({ children, className, style }: Props) {
<div className="ml-auto">
{/* TODO: this should probably have a title/tooltip instead that describes what it is since we ain't got a spot for a label */}
<span className="sr-only">Theme Switcher</span>
<SelectTrigger className="w-min" hideIcon>
<SelectIcon className="text-gray-600">
<svg width="39" height="24" fill="currentColor">
<path d="M28 9h10l-5 6-5-6Z" />
<path d="M16.02 2.297a10.53 10.53 0 0 1 3.58 2.457A10.464 10.464 0 0 1 22.5 12c0 5.799-4.701 10.5-10.5 10.5-2.81 0-5.361-1.104-7.246-2.9A10.468 10.468 0 0 1 1.5 12a10.469 10.469 0 0 1 3.075-7.425A10.469 10.469 0 0 1 12 1.5c1.424 0 2.781.283 4.02.797ZM20.9 12a8.87 8.87 0 0 0-2.432-6.114L5.886 18.468A8.9 8.9 0 0 0 20.9 12Z" />
</svg>
</SelectIcon>
<SelectTrigger className="w-min">
<Sun className="w-6 h-6 mr-1" />
</SelectTrigger>
</div>
<SelectContent>
<SelectOption value={theme("system")}>System</SelectOption>
<SelectOption value={theme("light")}>Light</SelectOption>
<SelectOption value={theme("dark")}>Dark</SelectOption>
<SelectOption value={theme("light-high-contrast")}>Light High Contrast</SelectOption>
<SelectOption value={theme("dark-high-contrast")}>Dark High Contrast</SelectOption>
<SelectItem value={theme("system")}>System</SelectItem>
<SelectItem value={theme("light")}>Light</SelectItem>
<SelectItem value={theme("dark")}>Dark</SelectItem>
<SelectItem value={theme("light-high-contrast")}>Light High Contrast</SelectItem>
<SelectItem value={theme("dark-high-contrast")}>Dark High Contrast</SelectItem>
</SelectContent>
</Select>
</header>
Expand Down
28 changes: 5 additions & 23 deletions app/routes/components.code-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
CodeBlockTitle,
} from "@/code-block";
import { code } from "@/code-block/code";
import { FileText } from "@phosphor-icons/react/FileText";
import { Terminal } from "@phosphor-icons/react/Terminal";
import type { MetaFunction } from "@vercel/remix";
import { Example } from "~/components/example";

Expand Down Expand Up @@ -35,7 +37,7 @@ export default function Page() {
<Example className="mt-4">
<CodeBlock>
<CodeBlockHeader>
<FileIcon />
<FileText className="w-5 h-5" weight="fill" />
<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
Expand Down Expand Up @@ -125,7 +127,7 @@ export default function Page() {
<Example className="mt-4">
<CodeBlock>
<CodeBlockHeader>
<CommandLineIcon />
<Terminal className="w-5 h-5" weight="fill" />
<CodeBlockTitle>Command Line</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
Expand Down Expand Up @@ -168,7 +170,7 @@ export default function Page() {
<Example className="mt-4">
<CodeBlock>
<CodeBlockHeader>
<FileIcon />
<FileText className="w-5 h-5" weight="fill" />
<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
Expand Down Expand Up @@ -332,23 +334,3 @@ export default function Page() {
</div>
);
}

const CommandLineIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
<path
fillRule="evenodd"
d="M3.25 3A2.25 2.25 0 001 5.25v9.5A2.25 2.25 0 003.25 17h13.5A2.25 2.25 0 0019 14.75v-9.5A2.25 2.25 0 0016.75 3H3.25zm.943 8.752a.75.75 0 01.055-1.06L6.128 9l-1.88-1.693a.75.75 0 111.004-1.114l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.06-.055zM9.75 10.25a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"
clipRule="evenodd"
/>
</svg>
);

const FileIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
<path
fillRule="evenodd"
d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"
clipRule="evenodd"
/>
</svg>
);
4 changes: 2 additions & 2 deletions components/back-to-top-button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ArrowLineUp } from "@phosphor-icons/react/ArrowLineUp";
import { useWindowScroll } from "@uidotdev/usehooks";
import { ArrowUpToLine } from "lucide-react";
import { useEffect, useRef, type CSSProperties } from "react";
import { cx } from "../cx";
import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion";
Expand Down Expand Up @@ -42,7 +42,7 @@ export const BackToTopButton = ({ className, showThresholdPx = 200, style }: Pro
tabIndex={-1}
>
<span className="sr-only">Scroll back to top</span>
<ArrowUpToLine />
<ArrowLineUp className="w-6 h-6" />
</TooltipTrigger>
<TooltipContent collisionPadding={8}>
<p>Scroll back to top</p>
Expand Down
28 changes: 5 additions & 23 deletions components/code-block/code-block.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { FileText } from "@phosphor-icons/react/FileText";
import { Terminal } from "@phosphor-icons/react/Terminal";
import type { Meta, StoryObj } from "@storybook/react";
import {
CodeBlock,
Expand All @@ -20,32 +22,12 @@ export default meta;

type Story = StoryObj<typeof meta>;

const CommandLineIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
<path
fillRule="evenodd"
d="M3.25 3A2.25 2.25 0 001 5.25v9.5A2.25 2.25 0 003.25 17h13.5A2.25 2.25 0 0019 14.75v-9.5A2.25 2.25 0 0016.75 3H3.25zm.943 8.752a.75.75 0 01.055-1.06L6.128 9l-1.88-1.693a.75.75 0 111.004-1.114l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.06-.055zM9.75 10.25a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"
clipRule="evenodd"
/>
</svg>
);

const FileIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
<path
fillRule="evenodd"
d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"
clipRule="evenodd"
/>
</svg>
);

export const WithHeaderFileExpanding: Story = {
render: () => (
<div className="mx-auto max-w-screen-md">
<CodeBlock>
<CodeBlockHeader className="flex items-center gap-1">
<FileIcon />
<FileText className="w-5 h-5" weight="fill" />
<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
Expand Down Expand Up @@ -108,7 +90,7 @@ export const WithHeaderCommandLine: Story = {
<div className="mx-auto max-w-screen-md">
<CodeBlock>
<CodeBlockHeader className="flex items-center gap-1">
<CommandLineIcon />
<Terminal className="w-5 h-5" weight="fill" />
<CodeBlockTitle>Command Line</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
Expand All @@ -127,7 +109,7 @@ export const WithHeaderFile: Story = {
<div className="mx-auto max-w-screen-md">
<CodeBlock>
<CodeBlockHeader className="flex items-center gap-1">
<FileIcon />
<FileText className="w-5 h-5" weight="fill" />
<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
Expand Down
56 changes: 10 additions & 46 deletions components/code-block/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ import {
import "prismjs/components/prism-bash.js";
import "prismjs/components/prism-jsx.js";
import "prismjs/components/prism-tsx.js";
import { CaretDown } from "@phosphor-icons/react/CaretDown";
import { Check } from "@phosphor-icons/react/Check";
import { Copy } from "@phosphor-icons/react/Copy";
import { useCopyToClipboard } from "@uidotdev/usehooks";
import assert from "tiny-invariant";
import { cx } from "../cx";
Expand Down Expand Up @@ -236,10 +239,10 @@ const CodeBlockCopyButton = forwardRef<HTMLButtonElement, CodeBlockCopyButtonPro
{copied ? (
<>
Copied
<CheckIcon />
<Check className="w-4 h-4" weight="bold" />
</>
) : (
<CopyIcon />
<Copy className="w-5 h-5 -ml-px" />
)}
</button>
);
Expand Down Expand Up @@ -270,7 +273,7 @@ const CodeBlockExpanderButton = forwardRef<HTMLButtonElement, CodeBlockExpanderB
aria-controls={codeId}
aria-expanded={isCodeExpanded}
className={cx(
"bg-gray-050 flex w-full items-center justify-center border-t border-gray-300 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100",
"bg-gray-050 flex w-full items-center justify-center border-t border-gray-300 px-4 py-2 gap-0.5 font-sans text-gray-700 hover:bg-gray-100",
className,
)}
ref={ref}
Expand All @@ -281,7 +284,10 @@ const CodeBlockExpanderButton = forwardRef<HTMLButtonElement, CodeBlockExpanderB
}}
>
{isCodeExpanded ? "Show less" : "Show more"}{" "}
<ExpandIcon className={cx(isCodeExpanded && "rotate-180", "transition-all duration-150")} />
<CaretDown
className={cx("w-4 h-4", isCodeExpanded && "rotate-180", "transition-all duration-150")}
weight="bold"
/>
</button>
);
},
Expand All @@ -297,45 +303,3 @@ export {
CodeBlockHeader,
CodeBlockTitle,
};

const ExpandIcon = ({ className, style }: WithStyleProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className={cx("relative top-px h-5 w-5 transition-transform", className)}
style={style}
>
<path d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" />
</svg>
);

const CopyIcon = ({ className, style }: WithStyleProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
strokeWidth="{1.5}"
stroke="currentColor"
className={cx("h-5 w-5", className)}
style={style}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M7.719 7.719v-3.5a1.5 1.5 0 0 1 1.5-1.5h5.562a1.5 1.5 0 0 1 1.5 1.5V12a1.5 1.5 0 0 1-1.5 1.5H11.5m-7.281 4.781H10a1.5 1.5 0 0 0 1.5-1.5V9.22a1.5 1.5 0 0 0-1.5-1.5H4.219a1.5 1.5 0 0 0-1.5 1.5v7.562a1.5 1.5 0 0 0 1.5 1.5Z"
/>
</svg>
);

const CheckIcon = ({ className, style }: WithStyleProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className={cx("h-5 w-5", className)}
style={style}
>
<path d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" />
</svg>
);
5 changes: 2 additions & 3 deletions components/drawer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { X } from "@phosphor-icons/react/X";
import * as DrawerPrimitive from "@radix-ui/react-dialog";
import { Cross2Icon } from "@radix-ui/react-icons";
import { cva, type VariantProps } from "class-variance-authority";
import { ComponentPropsWithoutRef, ElementRef, forwardRef, HTMLAttributes } from "react";
import { cx } from "../cx";
Expand Down Expand Up @@ -56,8 +56,7 @@ const DrawerContent = forwardRef<ElementRef<typeof DrawerPrimitive.Content>, Dra
<DrawerPrimitive.Content ref={ref} className={cx(drawerVariants({ side }), className)} {...props}>
{children}
<DrawerPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
{/* TODO(cody): replaceme w/ real icon */}
<Cross2Icon className="h-4 w-4" />
<X className="h-6 w-6" />
<span className="sr-only">Close</span>
</DrawerPrimitive.Close>
</DrawerPrimitive.Content>
Expand Down
10 changes: 6 additions & 4 deletions components/dropdown-menu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { CaretRight } from "@phosphor-icons/react/CaretRight";
import { Check } from "@phosphor-icons/react/Check";
import { Circle } from "@phosphor-icons/react/Circle";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { Check, ChevronRight, Circle } from "lucide-react";
import type { ComponentPropsWithoutRef, ElementRef } from "react";
import { forwardRef } from "react";
import { cx } from "../cx";
Expand Down Expand Up @@ -32,7 +34,7 @@ const DropdownMenuSubTrigger = forwardRef<
{...props}
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
<CaretRight className="ml-auto h-4 w-4" weight="bold" />
</DropdownMenuPrimitive.SubTrigger>
));
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
Expand Down Expand Up @@ -103,7 +105,7 @@ const DropdownMenuCheckboxItem = forwardRef<
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
<Check className="h-4 w-4" weight="bold" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
Expand All @@ -125,7 +127,7 @@ const DropdownMenuRadioItem = forwardRef<
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
<Circle className="h-2 w-2" weight="fill" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
Expand Down
3 changes: 1 addition & 2 deletions components/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,8 @@ export {
Select,
SelectContent,
SelectGroup,
SelectIcon,
SelectLabel,
SelectOption,
SelectItem,
SelectSeparator,
SelectTrigger,
SelectValue,
Expand Down
Loading