chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,195 @@
|
||||
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
|
||||
import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
|
||||
import { ClipboardField } from "~/components/primitives/ClipboardField";
|
||||
import { Header2 } from "~/components/primitives/Headers";
|
||||
import { Paragraph } from "~/components/primitives/Paragraph";
|
||||
|
||||
export default function Story() {
|
||||
return (
|
||||
<div className="flex gap-x-8 p-8">
|
||||
<div className="flex flex-col items-start whitespace-nowrap">
|
||||
<Header2 className="mb-[2.2rem]">Variants</Header2>
|
||||
<div className="mb-10 space-y-[2.33rem]">
|
||||
<Paragraph variant="small/bright">primary/small</Paragraph>
|
||||
<Paragraph variant="small/bright">secondary/small</Paragraph>
|
||||
<Paragraph variant="small/bright">tertiary/small</Paragraph>
|
||||
<Paragraph variant="small/bright">tertiary/small + LeadingIcon</Paragraph>
|
||||
<Paragraph variant="small/bright">tertiary/small + LeadingIcon</Paragraph>
|
||||
<Paragraph variant="small/bright">primary/small + iconButton</Paragraph>
|
||||
<Paragraph variant="small/bright">secondary/small + iconButton</Paragraph>
|
||||
<Paragraph variant="small/bright">tertiary/small + iconButton</Paragraph>
|
||||
</div>
|
||||
<div className="space-y-[2.9rem]">
|
||||
<Paragraph variant="small/bright">primary/medium</Paragraph>
|
||||
<Paragraph variant="small/bright">secondary/medium</Paragraph>
|
||||
<Paragraph variant="small/bright">tertiary/medium</Paragraph>
|
||||
<Paragraph variant="small/bright">tertiary/medium + LeadingIcon</Paragraph>
|
||||
<Paragraph variant="small/bright">tertiary/medium + LeadingIcon</Paragraph>
|
||||
<Paragraph variant="small/bright">primary/medium + iconButton</Paragraph>
|
||||
<Paragraph variant="small/bright">secondary/medium + iconButton</Paragraph>
|
||||
<Paragraph variant="small/bright">tertiary/medium + iconButton</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-start gap-y-8">
|
||||
<Header2>Default</Header2>
|
||||
<ClipboardField value="copy paste me" variant="primary/small" />
|
||||
<ClipboardField value="copy paste me" variant="secondary/small" />
|
||||
<ClipboardField value="copy paste me" variant="tertiary/small" />
|
||||
<ClipboardField
|
||||
value="with leadingIcon"
|
||||
variant="tertiary/small"
|
||||
icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
|
||||
/>
|
||||
<ClipboardField
|
||||
value="with leadingIcon"
|
||||
variant="tertiary/small"
|
||||
icon={<MagnifyingGlassIcon className="size-4" />}
|
||||
/>
|
||||
<ClipboardField value="with iconButton" variant="primary/small" iconButton />
|
||||
<ClipboardField value="with iconButton" variant="secondary/small" iconButton />
|
||||
<ClipboardField value="with iconButton" variant="tertiary/small" iconButton />
|
||||
<ClipboardField value="copy paste me" variant="primary/medium" />
|
||||
<ClipboardField value="copy paste me" variant="secondary/medium" />
|
||||
<ClipboardField value="copy paste me" variant="tertiary/medium" />
|
||||
<ClipboardField
|
||||
value="with leadingIcon"
|
||||
variant="tertiary/medium"
|
||||
icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
|
||||
/>
|
||||
<ClipboardField
|
||||
value="with leadingIcon"
|
||||
variant="tertiary/medium"
|
||||
icon={<MagnifyingGlassIcon className="size-4" />}
|
||||
/>
|
||||
<ClipboardField value="with iconButton" variant="primary/medium" iconButton />
|
||||
<ClipboardField value="with iconButton" variant="secondary/medium" iconButton />
|
||||
<ClipboardField value="with iconButton" variant="tertiary/medium" iconButton />
|
||||
</div>
|
||||
<div className="flex flex-col items-start gap-y-8">
|
||||
<Header2>Secure value</Header2>
|
||||
<ClipboardField value="copy paste me" variant="primary/small" secure={true} />
|
||||
<ClipboardField value="copy paste me" variant="secondary/small" secure={true} />
|
||||
<ClipboardField value="copy paste me" variant="tertiary/small" secure={true} />
|
||||
<ClipboardField
|
||||
value="with leadingIcon"
|
||||
variant="tertiary/small"
|
||||
secure={true}
|
||||
icon={<EnvironmentLabel environment={{ type: "STAGING" }} />}
|
||||
/>
|
||||
<ClipboardField
|
||||
value="with leadingIcon"
|
||||
variant="tertiary/small"
|
||||
icon={<MagnifyingGlassIcon className="size-4" />}
|
||||
secure={true}
|
||||
/>
|
||||
<ClipboardField value="with iconButton" variant="primary/small" iconButton secure={true} />
|
||||
<ClipboardField
|
||||
value="with iconButton"
|
||||
variant="secondary/small"
|
||||
iconButton
|
||||
secure={true}
|
||||
/>
|
||||
<ClipboardField value="with iconButton" variant="tertiary/small" iconButton secure={true} />
|
||||
{/* Medium size */}
|
||||
<ClipboardField value="copy paste me" variant="primary/medium" secure={true} />
|
||||
<ClipboardField value="copy paste me" variant="secondary/medium" secure={true} />
|
||||
<ClipboardField value="copy paste me" variant="tertiary/medium" secure={true} />
|
||||
<ClipboardField
|
||||
value="with leadingIcon"
|
||||
variant="tertiary/medium"
|
||||
icon={<EnvironmentLabel environment={{ type: "STAGING" }} />}
|
||||
secure={true}
|
||||
/>
|
||||
<ClipboardField
|
||||
value="with leadingIcon"
|
||||
variant="tertiary/medium"
|
||||
icon={<MagnifyingGlassIcon className="size-4" />}
|
||||
secure={true}
|
||||
/>
|
||||
<ClipboardField value="with iconButton" variant="primary/medium" iconButton secure={true} />
|
||||
<ClipboardField
|
||||
value="with iconButton"
|
||||
variant="secondary/medium"
|
||||
iconButton
|
||||
secure={true}
|
||||
/>
|
||||
<ClipboardField
|
||||
value="with iconButton"
|
||||
variant="tertiary/medium"
|
||||
iconButton
|
||||
secure={true}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-start gap-y-8">
|
||||
<Header2>Custom secure value</Header2>
|
||||
<ClipboardField value="npx abcdefghi" variant="primary/small" secure="npx ••••••••" />
|
||||
<ClipboardField value="npx abcdefghi" variant="secondary/small" secure="npx ••••••••" />
|
||||
<ClipboardField value="npx abcdefghi" variant="tertiary/small" secure="npx ••••••••" />
|
||||
<ClipboardField
|
||||
value="npx abcdefghi"
|
||||
variant="tertiary/small"
|
||||
icon={<EnvironmentLabel environment={{ type: "PRODUCTION" }} />}
|
||||
secure="npx ••••••••"
|
||||
/>
|
||||
<ClipboardField
|
||||
value="npx abcdefghi"
|
||||
variant="tertiary/small"
|
||||
icon={<MagnifyingGlassIcon className="size-4" />}
|
||||
secure="npx ••••••••"
|
||||
/>
|
||||
<ClipboardField
|
||||
value="npx abcdefghi"
|
||||
variant="primary/small"
|
||||
iconButton
|
||||
secure="npx ••••••••"
|
||||
/>
|
||||
<ClipboardField
|
||||
value="npx abcdefghi"
|
||||
variant="secondary/small"
|
||||
iconButton
|
||||
secure="npx ••••••••"
|
||||
/>
|
||||
<ClipboardField
|
||||
value="npx abcdefghi"
|
||||
variant="tertiary/small"
|
||||
iconButton
|
||||
secure="npx ••••••••"
|
||||
/>
|
||||
{/* Medium size */}
|
||||
<ClipboardField value="npx abcdefghi" variant="primary/medium" secure="npx ••••••••" />
|
||||
<ClipboardField value="npx abcdefghi" variant="secondary/medium" secure="npx ••••••••" />
|
||||
<ClipboardField value="npx abcdefghi" variant="tertiary/medium" secure="npx ••••••••" />
|
||||
<ClipboardField
|
||||
value="npx abcdefghi"
|
||||
variant="tertiary/medium"
|
||||
icon={<EnvironmentLabel environment={{ type: "PRODUCTION" }} />}
|
||||
secure="npx ••••••••"
|
||||
/>
|
||||
<ClipboardField
|
||||
value="npx abcdefghi"
|
||||
variant="tertiary/medium"
|
||||
icon={<MagnifyingGlassIcon className="size-4" />}
|
||||
secure="npx ••••••••"
|
||||
/>
|
||||
<ClipboardField
|
||||
value="npx abcdefghi"
|
||||
variant="primary/medium"
|
||||
iconButton
|
||||
secure="npx ••••••••"
|
||||
/>
|
||||
<ClipboardField
|
||||
value="npx abcdefghi"
|
||||
variant="secondary/medium"
|
||||
iconButton
|
||||
secure="npx ••••••••"
|
||||
/>
|
||||
<ClipboardField
|
||||
value="npx abcdefghi"
|
||||
variant="tertiary/medium"
|
||||
iconButton
|
||||
secure="npx ••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user