clan-app: Symlink more stuff from ui to ui-2d
This commit is contained in:
Qubasa
1
pkgs/clan-app/ui-2d/.storybook
Symbolic link
1
pkgs/clan-app/ui-2d/.storybook
Symbolic link
@@ -0,0 +1 @@
|
|||||||
|
../ui/.storybook
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
import { createRequire } from "module";
|
|
||||||
import { dirname, join } from "path";
|
|
||||||
import { mergeConfig } from "vite";
|
|
||||||
import type { StorybookConfig } from "@kachurun/storybook-solid-vite";
|
|
||||||
|
|
||||||
const require = createRequire(import.meta.url);
|
|
||||||
const getAbsolutePath = (pkg: string) =>
|
|
||||||
dirname(require.resolve(join(pkg, "package.json")));
|
|
||||||
|
|
||||||
const config: StorybookConfig = {
|
|
||||||
stories: ["../src/components/**/*.mdx", "../src/components/**/*.stories.tsx"],
|
|
||||||
addons: [
|
|
||||||
getAbsolutePath("@storybook/addon-links"),
|
|
||||||
getAbsolutePath("@storybook/addon-essentials"),
|
|
||||||
getAbsolutePath("@storybook/addon-interactions"),
|
|
||||||
],
|
|
||||||
framework: {
|
|
||||||
name: "@kachurun/storybook-solid-vite",
|
|
||||||
options: {},
|
|
||||||
},
|
|
||||||
async viteFinal(config) {
|
|
||||||
return mergeConfig(config, {
|
|
||||||
define: { "process.env": {} },
|
|
||||||
});
|
|
||||||
},
|
|
||||||
docs: {
|
|
||||||
autodocs: "tag",
|
|
||||||
},
|
|
||||||
core: {
|
|
||||||
disableTelemetry: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
html {
|
|
||||||
/* revert this which only makes sense when rendering inside the clan app webview */
|
|
||||||
overflow-x: revert;
|
|
||||||
overflow-y: revert;
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import type { Preview } from "@kachurun/storybook-solid";
|
|
||||||
|
|
||||||
import "@/src/components/v2/index.css";
|
|
||||||
import "../src/index.css";
|
|
||||||
import "./preview.css";
|
|
||||||
|
|
||||||
export const preview: Preview = {
|
|
||||||
tags: ["autodocs"],
|
|
||||||
parameters: {
|
|
||||||
docs: { toc: true },
|
|
||||||
backgrounds: {
|
|
||||||
values: [
|
|
||||||
{ name: "Dark", value: "#333" },
|
|
||||||
{ name: "Light", value: "#ffffff" },
|
|
||||||
],
|
|
||||||
default: "Light",
|
|
||||||
},
|
|
||||||
// automatically create action args for all props that start with "on"
|
|
||||||
actions: { argTypesRegex: "^on.*" },
|
|
||||||
controls: {
|
|
||||||
matchers: {
|
|
||||||
color: /(background|color)$/i,
|
|
||||||
date: /Date$/,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default preview;
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import type { TestRunnerConfig } from "@storybook/test-runner";
|
|
||||||
|
|
||||||
const config: TestRunnerConfig = {
|
|
||||||
async postVisit(page, context) {
|
|
||||||
// the #storybook-root element wraps the story. In Storybook 6.x, the selector is #root
|
|
||||||
const elementHandler = await page.$("#storybook-root");
|
|
||||||
const innerHTML = await elementHandler.innerHTML();
|
|
||||||
expect(innerHTML).toMatchSnapshot();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
14253
pkgs/clan-app/ui-2d/package-lock.json
generated
14253
pkgs/clan-app/ui-2d/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,78 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "@clan/ui",
|
|
||||||
"version": "0.0.1",
|
|
||||||
"description": "",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"start": "vite",
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "npm run check && npm run test && vite build && npm run convert-html",
|
|
||||||
"convert-html": "node gtk.webview.js",
|
|
||||||
"serve": "vite preview",
|
|
||||||
"check": "tsc --noEmit --skipLibCheck && eslint ./src",
|
|
||||||
"test": "vitest run --typecheck",
|
|
||||||
"storybook": "storybook",
|
|
||||||
"storybook-build": "storybook build",
|
|
||||||
"storybook-dev": "storybook dev -p 6006",
|
|
||||||
"test-storybook": "test-storybook --browsers chromium --ci",
|
|
||||||
"test-storybook-update-snapshots": "npm run test-storybook -- --updateSnapshot",
|
|
||||||
"test-storybook-static": "npm run storybook-build && concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'http-server storybook-static --port 6006 --silent' 'wait-on tcp:127.0.0.1:6006 && npm run test-storybook'"
|
|
||||||
},
|
|
||||||
"license": "MIT",
|
|
||||||
"devDependencies": {
|
|
||||||
"@babel/plugin-syntax-import-attributes": "^7.27.1",
|
|
||||||
"@eslint/js": "^9.3.0",
|
|
||||||
"@kachurun/storybook-solid": "^8.6.7",
|
|
||||||
"@kachurun/storybook-solid-vite": "^8.6.7",
|
|
||||||
"@storybook/addon-essentials": "^8.6.14",
|
|
||||||
"@storybook/addon-interactions": "^8.6.14",
|
|
||||||
"@storybook/addon-links": "^8.6.14",
|
|
||||||
"@storybook/addon-viewport": "^8.6.14",
|
|
||||||
"@storybook/builder-vite": "^8.6.14",
|
|
||||||
"@storybook/test-runner": "^0.22.0",
|
|
||||||
"@tailwindcss/typography": "^0.5.13",
|
|
||||||
"@types/json-schema": "^7.0.15",
|
|
||||||
"@types/node": "^22.15.19",
|
|
||||||
"@types/three": "^0.176.0",
|
|
||||||
"@typescript-eslint/parser": "^8.32.1",
|
|
||||||
"autoprefixer": "^10.4.19",
|
|
||||||
"classnames": "^2.5.1",
|
|
||||||
"concurrently": "^9.1.2",
|
|
||||||
"eslint": "^9.27.0",
|
|
||||||
"eslint-plugin-tailwindcss": "^3.17.0",
|
|
||||||
"http-server": "^14.1.1",
|
|
||||||
"jsdom": "^26.1.0",
|
|
||||||
"postcss": "^8.4.38",
|
|
||||||
"postcss-url": "^10.1.3",
|
|
||||||
"prettier": "^3.2.5",
|
|
||||||
"solid-devtools": "^0.34.0",
|
|
||||||
"storybook": "^8.6.14",
|
|
||||||
"storybook-addon-pseudo-states": "^4.0.3",
|
|
||||||
"tailwindcss": "^3.4.3",
|
|
||||||
"typescript": "^5.4.5",
|
|
||||||
"typescript-eslint": "^8.32.1",
|
|
||||||
"vite": "^6.3.5",
|
|
||||||
"vite-plugin-solid": "^2.8.2",
|
|
||||||
"vite-plugin-solid-svg": "^0.8.1",
|
|
||||||
"vitest": "^3.1.4",
|
|
||||||
"wait-on": "^8.0.3"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@floating-ui/dom": "^1.6.8",
|
|
||||||
"@kobalte/core": "^0.13.10",
|
|
||||||
"@kobalte/tailwindcss": "^0.9.0",
|
|
||||||
"@modular-forms/solid": "^0.25.1",
|
|
||||||
"@solid-primitives/storage": "^4.3.2",
|
|
||||||
"@solidjs/router": "^0.15.3",
|
|
||||||
"@storybook/test": "^8.6.14",
|
|
||||||
"@tanstack/eslint-plugin-query": "^5.51.12",
|
|
||||||
"@tanstack/solid-query": "^5.76.0",
|
|
||||||
"corvu": "^0.7.1",
|
|
||||||
"material-icons": "^1.13.12",
|
|
||||||
"nanoid": "^5.0.7",
|
|
||||||
"solid-js": "^1.9.7",
|
|
||||||
"solid-markdown": "^2.0.13",
|
|
||||||
"solid-toast": "^0.5.0",
|
|
||||||
"three": "^0.176.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,970 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Components/RemoteForm Disabled smoke-test 1`] = `
|
|
||||||
<div class="max-w-2xl p-6">
|
|
||||||
<h2 class="mb-6 text-2xl font-bold">
|
|
||||||
Remote Configuration
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="grid grid-cols-10 items-center">
|
|
||||||
<div class="col-span-5 flex items-center">
|
|
||||||
<label class="flex items-center gap-1 col-span-2"
|
|
||||||
error="false"
|
|
||||||
help="Username to connect as on the remote server"
|
|
||||||
>
|
|
||||||
<span class="flex flex-col justify-center">
|
|
||||||
<span>
|
|
||||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
|
||||||
User
|
|
||||||
</span>
|
|
||||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
<span class=" inline px-2"
|
|
||||||
data-tip="Username to connect as on the remote server"
|
|
||||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="0.8125rem"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="inline fg-def-3"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-5">
|
|
||||||
<div tabindex="0"
|
|
||||||
role="textbox"
|
|
||||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="true"
|
|
||||||
>
|
|
||||||
<input tabindex="-1"
|
|
||||||
class="w-full bg-transparent outline-none"
|
|
||||||
type="text"
|
|
||||||
placeholder="username"
|
|
||||||
required
|
|
||||||
disabled
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="true"
|
|
||||||
error="false"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-10 items-center">
|
|
||||||
<div class="col-span-5 flex items-center">
|
|
||||||
<label class="flex items-center gap-1 col-span-2"
|
|
||||||
error="false"
|
|
||||||
help="The hostname or IP address of the remote server"
|
|
||||||
>
|
|
||||||
<span class="flex flex-col justify-center">
|
|
||||||
<span>
|
|
||||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
|
||||||
Address
|
|
||||||
</span>
|
|
||||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
<span class=" inline px-2"
|
|
||||||
data-tip="The hostname or IP address of the remote server"
|
|
||||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="0.8125rem"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="inline fg-def-3"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-5">
|
|
||||||
<div tabindex="0"
|
|
||||||
role="textbox"
|
|
||||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="true"
|
|
||||||
>
|
|
||||||
<input tabindex="-1"
|
|
||||||
class="w-full bg-transparent outline-none"
|
|
||||||
type="text"
|
|
||||||
placeholder="hostname or IP address"
|
|
||||||
required
|
|
||||||
disabled
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="true"
|
|
||||||
error="false"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div tabindex="0"
|
|
||||||
class="accordion mt-6"
|
|
||||||
>
|
|
||||||
<div class="accordion__title">
|
|
||||||
<button class="button button--ghost-hover button--ghost-focus button--ghost-active button button--small">
|
|
||||||
<span class="text-inherit fnt-label-s fnt-weight-medium button__label">
|
|
||||||
Advanced Options
|
|
||||||
</span>
|
|
||||||
<span class="button__icon--end">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="12"
|
|
||||||
height="12"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
size="12"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M40.25 15H7v4.75h4.75v4.75h4.75v4.75h4.75V34H26v-4.75h4.75V24.5h4.75v-4.75h4.75z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-end pt-4">
|
|
||||||
<button type="button"
|
|
||||||
disabled
|
|
||||||
data-disabled
|
|
||||||
class="min-w-24 button default primary"
|
|
||||||
>
|
|
||||||
<div class="loader primary">
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="parent">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="child">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="typography text-inherit font-family-mono font-weight-bold font-size-default label font-label">
|
|
||||||
Save
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<details class="mt-8">
|
|
||||||
<summary class="cursor-pointer font-semibold">
|
|
||||||
Current Form Data (Debug)
|
|
||||||
</summary>
|
|
||||||
<pre class="mt-2 overflow-auto rounded bg-gray-100 p-4 text-sm">
|
|
||||||
{
|
|
||||||
"address": "example.com",
|
|
||||||
"user": "admin",
|
|
||||||
"command_prefix": "sudo",
|
|
||||||
"port": 22,
|
|
||||||
"password": "",
|
|
||||||
"forward_agent": true,
|
|
||||||
"host_key_check": 1,
|
|
||||||
"verbose_ssh": false,
|
|
||||||
"ssh_options": {
|
|
||||||
"StrictHostKeyChecking": "no",
|
|
||||||
"UserKnownHostsFile": "/dev/null"
|
|
||||||
},
|
|
||||||
"tor_socks": false
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/RemoteForm Empty smoke-test 1`] = `
|
|
||||||
<div class="max-w-2xl p-6">
|
|
||||||
<h2 class="mb-6 text-2xl font-bold">
|
|
||||||
Remote Configuration
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="grid grid-cols-10 items-center">
|
|
||||||
<div class="col-span-5 flex items-center">
|
|
||||||
<label class="flex items-center gap-1 col-span-2"
|
|
||||||
error="false"
|
|
||||||
help="Username to connect as on the remote server"
|
|
||||||
>
|
|
||||||
<span class="flex flex-col justify-center">
|
|
||||||
<span>
|
|
||||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
|
||||||
User
|
|
||||||
</span>
|
|
||||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
<span class=" inline px-2"
|
|
||||||
data-tip="Username to connect as on the remote server"
|
|
||||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="0.8125rem"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="inline fg-def-3"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-5">
|
|
||||||
<div tabindex="0"
|
|
||||||
role="textbox"
|
|
||||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
>
|
|
||||||
<input tabindex="-1"
|
|
||||||
class="w-full bg-transparent outline-none"
|
|
||||||
type="text"
|
|
||||||
placeholder="username"
|
|
||||||
required
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
error="false"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-10 items-center">
|
|
||||||
<div class="col-span-5 flex items-center">
|
|
||||||
<label class="flex items-center gap-1 col-span-2"
|
|
||||||
error="false"
|
|
||||||
help="The hostname or IP address of the remote server"
|
|
||||||
>
|
|
||||||
<span class="flex flex-col justify-center">
|
|
||||||
<span>
|
|
||||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
|
||||||
Address
|
|
||||||
</span>
|
|
||||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
<span class=" inline px-2"
|
|
||||||
data-tip="The hostname or IP address of the remote server"
|
|
||||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="0.8125rem"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="inline fg-def-3"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-5">
|
|
||||||
<div tabindex="0"
|
|
||||||
role="textbox"
|
|
||||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
>
|
|
||||||
<input tabindex="-1"
|
|
||||||
class="w-full bg-transparent outline-none"
|
|
||||||
type="text"
|
|
||||||
placeholder="hostname or IP address"
|
|
||||||
required
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
error="false"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div tabindex="0"
|
|
||||||
class="accordion mt-6"
|
|
||||||
>
|
|
||||||
<div class="accordion__title">
|
|
||||||
<button class="button button--ghost-hover button--ghost-focus button--ghost-active button button--small">
|
|
||||||
<span class="text-inherit fnt-label-s fnt-weight-medium button__label">
|
|
||||||
Advanced Options
|
|
||||||
</span>
|
|
||||||
<span class="button__icon--end">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="12"
|
|
||||||
height="12"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
size="12"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M40.25 15H7v4.75h4.75v4.75h4.75v4.75h4.75V34H26v-4.75h4.75V24.5h4.75v-4.75h4.75z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-end pt-4">
|
|
||||||
<button type="button"
|
|
||||||
class="min-w-24 button default primary"
|
|
||||||
>
|
|
||||||
<div class="loader primary">
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="parent">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="child">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="typography text-inherit font-family-mono font-weight-bold font-size-default label font-label">
|
|
||||||
Save
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<details class="mt-8">
|
|
||||||
<summary class="cursor-pointer font-semibold">
|
|
||||||
Current Form Data (Debug)
|
|
||||||
</summary>
|
|
||||||
<pre class="mt-2 overflow-auto rounded bg-gray-100 p-4 text-sm">
|
|
||||||
{
|
|
||||||
"address": "",
|
|
||||||
"user": "",
|
|
||||||
"command_prefix": "",
|
|
||||||
"password": "",
|
|
||||||
"forward_agent": false,
|
|
||||||
"host_key_check": 0,
|
|
||||||
"verbose_ssh": false,
|
|
||||||
"ssh_options": {},
|
|
||||||
"tor_socks": false
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/RemoteForm HiddenSaveButton smoke-test 1`] = `
|
|
||||||
<div class="max-w-2xl p-6">
|
|
||||||
<h2 class="mb-6 text-2xl font-bold">
|
|
||||||
Remote Configuration
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="grid grid-cols-10 items-center">
|
|
||||||
<div class="col-span-5 flex items-center">
|
|
||||||
<label class="flex items-center gap-1 col-span-2"
|
|
||||||
error="false"
|
|
||||||
help="Username to connect as on the remote server"
|
|
||||||
>
|
|
||||||
<span class="flex flex-col justify-center">
|
|
||||||
<span>
|
|
||||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
|
||||||
User
|
|
||||||
</span>
|
|
||||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
<span class=" inline px-2"
|
|
||||||
data-tip="Username to connect as on the remote server"
|
|
||||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="0.8125rem"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="inline fg-def-3"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-5">
|
|
||||||
<div tabindex="0"
|
|
||||||
role="textbox"
|
|
||||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
>
|
|
||||||
<input tabindex="-1"
|
|
||||||
class="w-full bg-transparent outline-none"
|
|
||||||
type="text"
|
|
||||||
placeholder="username"
|
|
||||||
required
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
error="false"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-10 items-center">
|
|
||||||
<div class="col-span-5 flex items-center">
|
|
||||||
<label class="flex items-center gap-1 col-span-2"
|
|
||||||
error="false"
|
|
||||||
help="The hostname or IP address of the remote server"
|
|
||||||
>
|
|
||||||
<span class="flex flex-col justify-center">
|
|
||||||
<span>
|
|
||||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
|
||||||
Address
|
|
||||||
</span>
|
|
||||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
<span class=" inline px-2"
|
|
||||||
data-tip="The hostname or IP address of the remote server"
|
|
||||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="0.8125rem"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="inline fg-def-3"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-5">
|
|
||||||
<div tabindex="0"
|
|
||||||
role="textbox"
|
|
||||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
>
|
|
||||||
<input tabindex="-1"
|
|
||||||
class="w-full bg-transparent outline-none"
|
|
||||||
type="text"
|
|
||||||
placeholder="hostname or IP address"
|
|
||||||
required
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
error="false"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div tabindex="0"
|
|
||||||
class="accordion mt-6"
|
|
||||||
>
|
|
||||||
<div class="accordion__title">
|
|
||||||
<button class="button button--ghost-hover button--ghost-focus button--ghost-active button button--small">
|
|
||||||
<span class="text-inherit fnt-label-s fnt-weight-medium button__label">
|
|
||||||
Advanced Options
|
|
||||||
</span>
|
|
||||||
<span class="button__icon--end">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="12"
|
|
||||||
height="12"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
size="12"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M40.25 15H7v4.75h4.75v4.75h4.75v4.75h4.75V34H26v-4.75h4.75V24.5h4.75v-4.75h4.75z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<details class="mt-8">
|
|
||||||
<summary class="cursor-pointer font-semibold">
|
|
||||||
Current Form Data (Debug)
|
|
||||||
</summary>
|
|
||||||
<pre class="mt-2 overflow-auto rounded bg-gray-100 p-4 text-sm">
|
|
||||||
{
|
|
||||||
"address": "example.com",
|
|
||||||
"user": "admin",
|
|
||||||
"command_prefix": "sudo",
|
|
||||||
"port": 22,
|
|
||||||
"password": "",
|
|
||||||
"forward_agent": true,
|
|
||||||
"host_key_check": 1,
|
|
||||||
"verbose_ssh": false,
|
|
||||||
"ssh_options": {
|
|
||||||
"StrictHostKeyChecking": "no",
|
|
||||||
"UserKnownHostsFile": "/dev/null"
|
|
||||||
},
|
|
||||||
"tor_socks": false
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/RemoteForm NixManaged smoke-test 1`] = `
|
|
||||||
<div class="max-w-2xl p-6">
|
|
||||||
<h2 class="mb-6 text-2xl font-bold">
|
|
||||||
Remote Configuration
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center justify-between rounded-md border border-amber-200 bg-amber-50 p-3">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="size-5 text-amber-600"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M42 6H5v37h37zm-20.555 8.222h4.111v12.334h-4.111zm0 16.445h4.111v4.11h-4.111z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
<span class="text-sm font-medium text-amber-800">
|
|
||||||
Configuration managed by Nix
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<button type="button"
|
|
||||||
class="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-amber-700 hover:bg-amber-100"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="size-3"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M9.714 9.714h8.572V6.857h2.857V4h5.714v2.857h2.857v2.857h8.572v8.572h2.857v2.857H44v5.714h-2.857v2.857h-2.857v8.572h-8.572v2.857h-2.857V44h-5.714v-2.857h-2.857v-2.857H9.714v-8.572H6.857v-2.857H4v-5.714h2.857v-2.857h2.857zm8.572 5.715v2.857h-2.857v11.428h2.857v2.857h11.428v-2.857h2.857V18.286h-2.857v-2.857z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
Unlock to edit
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-10 items-center">
|
|
||||||
<div class="col-span-5 flex items-center">
|
|
||||||
<label class="flex items-center gap-1 col-span-2"
|
|
||||||
error="false"
|
|
||||||
help="Username to connect as on the remote server"
|
|
||||||
>
|
|
||||||
<span class="flex flex-col justify-center">
|
|
||||||
<span>
|
|
||||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
|
||||||
User
|
|
||||||
</span>
|
|
||||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
<span class=" inline px-2"
|
|
||||||
data-tip="Username to connect as on the remote server"
|
|
||||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="0.8125rem"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="inline fg-def-3"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-5">
|
|
||||||
<div tabindex="0"
|
|
||||||
role="textbox"
|
|
||||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
>
|
|
||||||
<input tabindex="-1"
|
|
||||||
class="w-full bg-transparent outline-none"
|
|
||||||
type="text"
|
|
||||||
placeholder="username"
|
|
||||||
required
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
error="false"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-10 items-center">
|
|
||||||
<div class="col-span-5 flex items-center">
|
|
||||||
<label class="flex items-center gap-1 col-span-2"
|
|
||||||
error="false"
|
|
||||||
help="The hostname or IP address of the remote server"
|
|
||||||
>
|
|
||||||
<span class="flex flex-col justify-center">
|
|
||||||
<span>
|
|
||||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
|
||||||
Address
|
|
||||||
</span>
|
|
||||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
<span class=" inline px-2"
|
|
||||||
data-tip="The hostname or IP address of the remote server"
|
|
||||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="0.8125rem"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="inline fg-def-3"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-5">
|
|
||||||
<div tabindex="0"
|
|
||||||
role="textbox"
|
|
||||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
>
|
|
||||||
<input tabindex="-1"
|
|
||||||
class="w-full bg-transparent outline-none"
|
|
||||||
type="text"
|
|
||||||
placeholder="hostname or IP address"
|
|
||||||
required
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
error="false"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div tabindex="0"
|
|
||||||
class="accordion mt-6"
|
|
||||||
>
|
|
||||||
<div class="accordion__title">
|
|
||||||
<button class="button button--ghost-hover button--ghost-focus button--ghost-active button button--small">
|
|
||||||
<span class="text-inherit fnt-label-s fnt-weight-medium button__label">
|
|
||||||
Advanced Options
|
|
||||||
</span>
|
|
||||||
<span class="button__icon--end">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="12"
|
|
||||||
height="12"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
size="12"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M40.25 15H7v4.75h4.75v4.75h4.75v4.75h4.75V34H26v-4.75h4.75V24.5h4.75v-4.75h4.75z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-end pt-4">
|
|
||||||
<button type="button"
|
|
||||||
class="min-w-24 button default primary"
|
|
||||||
>
|
|
||||||
<div class="loader primary">
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="parent">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="child">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="typography text-inherit font-family-mono font-weight-bold font-size-default label font-label">
|
|
||||||
Save
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<details class="mt-8">
|
|
||||||
<summary class="cursor-pointer font-semibold">
|
|
||||||
Current Form Data (Debug)
|
|
||||||
</summary>
|
|
||||||
<pre class="mt-2 overflow-auto rounded bg-gray-100 p-4 text-sm">
|
|
||||||
{
|
|
||||||
"address": "192.168.1.100",
|
|
||||||
"user": "deploy",
|
|
||||||
"command_prefix": "doas",
|
|
||||||
"port": 2222,
|
|
||||||
"password": "",
|
|
||||||
"forward_agent": false,
|
|
||||||
"host_key_check": 2,
|
|
||||||
"verbose_ssh": true,
|
|
||||||
"ssh_options": {
|
|
||||||
"ConnectTimeout": "10",
|
|
||||||
"ServerAliveInterval": "60",
|
|
||||||
"ServerAliveCountMax": "3",
|
|
||||||
"Compression": "yes",
|
|
||||||
"TCPKeepAlive": "yes"
|
|
||||||
},
|
|
||||||
"tor_socks": true
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/RemoteForm Populated smoke-test 1`] = `
|
|
||||||
<div class="max-w-2xl p-6">
|
|
||||||
<h2 class="mb-6 text-2xl font-bold">
|
|
||||||
Remote Configuration
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="grid grid-cols-10 items-center">
|
|
||||||
<div class="col-span-5 flex items-center">
|
|
||||||
<label class="flex items-center gap-1 col-span-2"
|
|
||||||
error="false"
|
|
||||||
help="Username to connect as on the remote server"
|
|
||||||
>
|
|
||||||
<span class="flex flex-col justify-center">
|
|
||||||
<span>
|
|
||||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
|
||||||
User
|
|
||||||
</span>
|
|
||||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
<span class=" inline px-2"
|
|
||||||
data-tip="Username to connect as on the remote server"
|
|
||||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="0.8125rem"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="inline fg-def-3"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-5">
|
|
||||||
<div tabindex="0"
|
|
||||||
role="textbox"
|
|
||||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
>
|
|
||||||
<input tabindex="-1"
|
|
||||||
class="w-full bg-transparent outline-none"
|
|
||||||
type="text"
|
|
||||||
placeholder="username"
|
|
||||||
required
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
error="false"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-10 items-center">
|
|
||||||
<div class="col-span-5 flex items-center">
|
|
||||||
<label class="flex items-center gap-1 col-span-2"
|
|
||||||
error="false"
|
|
||||||
help="The hostname or IP address of the remote server"
|
|
||||||
>
|
|
||||||
<span class="flex flex-col justify-center">
|
|
||||||
<span>
|
|
||||||
<span class="fnt-clr-primary fnt-label-default fnt-weight-bold inline-flex gap-1 align-middle !fg-def-1">
|
|
||||||
Address
|
|
||||||
</span>
|
|
||||||
<span class="text-inherit fnt-label-xs fnt-weight-bold inline-flex px-1 align-text-top leading-[0.5] fg-def-4">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
<span class=" inline px-2"
|
|
||||||
data-tip="The hostname or IP address of the remote server"
|
|
||||||
style="--tooltip-color: #EFFFFF; --tooltip-text-color: #0D1416; --tooltip-tail: 0.8125rem;"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="0.8125rem"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
class="inline fg-def-3"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="fnt-clr-secondary fnt-body-xs fnt-weight-normal">
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-5">
|
|
||||||
<div tabindex="0"
|
|
||||||
role="textbox"
|
|
||||||
class="flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6 bg-def-1 hover:bg-def-acc-1 fg-def-1 aria-disabled:fg-def-4 aria-readonly:fg-def-3 border border-inv-3 rounded-sm hover:border-inv-4 aria-disabled:border-def-2 aria-disabled:border outline-offset-1 outline-1 active:outline active:outline-inv-3 focus-visible:outline-double focus-visible:outline-int-1 aria-readonly:cursor-no-drop col-span-10"
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
>
|
|
||||||
<input tabindex="-1"
|
|
||||||
class="w-full bg-transparent outline-none"
|
|
||||||
type="text"
|
|
||||||
placeholder="hostname or IP address"
|
|
||||||
required
|
|
||||||
aria-invalid="false"
|
|
||||||
aria-disabled="false"
|
|
||||||
error="false"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div tabindex="0"
|
|
||||||
class="accordion mt-6"
|
|
||||||
>
|
|
||||||
<div class="accordion__title">
|
|
||||||
<button class="button button--ghost-hover button--ghost-focus button--ghost-active button button--small">
|
|
||||||
<span class="text-inherit fnt-label-s fnt-weight-medium button__label">
|
|
||||||
Advanced Options
|
|
||||||
</span>
|
|
||||||
<span class="button__icon--end">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="12"
|
|
||||||
height="12"
|
|
||||||
fill="currentColor"
|
|
||||||
viewbox="0 0 48 48"
|
|
||||||
size="12"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M40.25 15H7v4.75h4.75v4.75h4.75v4.75h4.75V34H26v-4.75h4.75V24.5h4.75v-4.75h4.75z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
>
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-end pt-4">
|
|
||||||
<button type="button"
|
|
||||||
class="min-w-24 button default primary"
|
|
||||||
>
|
|
||||||
<div class="loader primary">
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="parent">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="child">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="typography text-inherit font-family-mono font-weight-bold font-size-default label font-label">
|
|
||||||
Save
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<details class="mt-8">
|
|
||||||
<summary class="cursor-pointer font-semibold">
|
|
||||||
Current Form Data (Debug)
|
|
||||||
</summary>
|
|
||||||
<pre class="mt-2 overflow-auto rounded bg-gray-100 p-4 text-sm">
|
|
||||||
{
|
|
||||||
"address": "example.com",
|
|
||||||
"user": "admin",
|
|
||||||
"command_prefix": "sudo",
|
|
||||||
"port": 22,
|
|
||||||
"password": "",
|
|
||||||
"forward_agent": true,
|
|
||||||
"host_key_check": 1,
|
|
||||||
"verbose_ssh": false,
|
|
||||||
"ssh_options": {
|
|
||||||
"StrictHostKeyChecking": "no",
|
|
||||||
"UserKnownHostsFile": "/dev/null"
|
|
||||||
},
|
|
||||||
"tor_socks": false
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
1
pkgs/clan-app/ui-2d/src/components/v2
Symbolic link
1
pkgs/clan-app/ui-2d/src/components/v2
Symbolic link
@@ -0,0 +1 @@
|
|||||||
|
../../../ui/src/components/v2
|
||||||
@@ -1,134 +0,0 @@
|
|||||||
.button {
|
|
||||||
@apply flex gap-2 shrink-0 items-center justify-center;
|
|
||||||
@apply px-4 py-2;
|
|
||||||
|
|
||||||
height: theme(height.9);
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
/* Add transition for smooth width animation */
|
|
||||||
transition: width 0.5s ease 0.1s;
|
|
||||||
|
|
||||||
&.s {
|
|
||||||
@apply px-3 py-1.5;
|
|
||||||
height: theme(height.7);
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
&:has(> .icon-start):has(> .label) {
|
|
||||||
@apply pl-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:has(> .icon-end):has(> .label) {
|
|
||||||
@apply pr-2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.primary {
|
|
||||||
@apply bg-inv-acc-4 fg-inv-1;
|
|
||||||
@apply border border-solid border-inv-4;
|
|
||||||
@apply shadow-button-primary;
|
|
||||||
|
|
||||||
&.ghost {
|
|
||||||
@apply bg-transparent border-none shadow-none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@apply bg-inv-acc-3 border-solid shadow-button-primary-hover;
|
|
||||||
border-color: theme(backgroundColor.secondary.700);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
@apply bg-inv-acc-4 border-solid border-inv-3 shadow-button-primary-active;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus-visible {
|
|
||||||
@apply bg-inv-acc-4 border-solid border-inv-3 shadow-button-primary-focus;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
@apply bg-def-acc-3 border-solid border-def-3 fg-def-3 shadow-none;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .icon {
|
|
||||||
@apply fg-inv-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.secondary {
|
|
||||||
@apply bg-def-acc-2 fg-def-1;
|
|
||||||
@apply border border-solid border-inv-2;
|
|
||||||
@apply shadow-button-secondary;
|
|
||||||
|
|
||||||
&.ghost {
|
|
||||||
@apply bg-transparent border-none shadow-none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@apply bg-def-acc-3 border-solid shadow-button-secondary-hover;
|
|
||||||
border-color: theme(backgroundColor.secondary.700);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus-visible {
|
|
||||||
@apply bg-def-acc-3 border-solid border-inv-3 shadow-button-secondary-focus;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
@apply bg-def-acc-3 border-solid border-inv-4 shadow-button-secondary-active;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
@apply bg-def-2 border-solid border-def-2 fg-def-3 shadow-none;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .icon {
|
|
||||||
@apply fg-def-1;
|
|
||||||
|
|
||||||
&.icon-loading {
|
|
||||||
color: #0051ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.icon {
|
|
||||||
@apply p-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:has(> .icon-start):has(> .label) {
|
|
||||||
@apply pl-3.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:has(> .icon-end):has(> .label) {
|
|
||||||
@apply pr-3.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div.loader {
|
|
||||||
@apply w-0 opacity-0;
|
|
||||||
@apply top-0 left-0 -mr-2;
|
|
||||||
transition: all 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.loading {
|
|
||||||
@apply cursor-wait;
|
|
||||||
|
|
||||||
& > div.loader {
|
|
||||||
@apply w-4 opacity-100;
|
|
||||||
margin-right: revert;
|
|
||||||
transition: all 0.5s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* button group */
|
|
||||||
.button-group .button:first-child {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-group .button:first-child {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-group .button:last-child {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
import { DocsStory, Meta, Canvas } from "@storybook/blocks";
|
|
||||||
|
|
||||||
import * as ButtonStories from "./Button.stories";
|
|
||||||
|
|
||||||
<Meta of={ButtonStories} />
|
|
||||||
|
|
||||||
# Button
|
|
||||||
|
|
||||||
Buttons have a simple hierarchy, `primary` or `secondary`, and two sizes, `default` and `s`.
|
|
||||||
|
|
||||||
A `Button` can also have a label with a `startIcon`, an `endIcon` or both:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
<Button hierarchy="primary">Label</>
|
|
||||||
<Button hierarchy="secondary" size="s">Label</>
|
|
||||||
<Button hierarchy="primary" startIcon="Flash">Label</>
|
|
||||||
<Button hierarchy="primary" size="s" endIcon="Flash">Label</>
|
|
||||||
<Button hierarchy="primary" startIcon="Flash" endIcon="Flash">Label</>
|
|
||||||
```
|
|
||||||
|
|
||||||
To create a `Button` which is just an icon:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
<Button icon="Flash"/>
|
|
||||||
<Button icon="User" size="s"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
<DocsStory of={ButtonStories.Primary} />
|
|
||||||
|
|
||||||
<DocsStory of={ButtonStories.Secondary} />
|
|
||||||
|
|
||||||
## Ghost Mode
|
|
||||||
|
|
||||||
Buttons in ghost mode have all the same states as normal buttons, except for their initial state has no background,
|
|
||||||
outline or box shadow.
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
<Button hierarchy="primary" ghost={true}>Label</>
|
|
||||||
```
|
|
||||||
|
|
||||||
<DocsStory of={ButtonStories.GhostPrimary} />
|
|
||||||
|
|
||||||
<DocsStory of={ButtonStories.GhostSecondary} />
|
|
||||||
@@ -1,251 +0,0 @@
|
|||||||
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
|
|
||||||
import { Button, ButtonProps } from "./Button";
|
|
||||||
import { Component } from "solid-js";
|
|
||||||
import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
|
|
||||||
|
|
||||||
const getCursorStyle = (el: Element) => window.getComputedStyle(el).cursor;
|
|
||||||
|
|
||||||
const ButtonExamples: Component<ButtonProps> = (props) => (
|
|
||||||
<>
|
|
||||||
<div class="grid w-fit grid-cols-4 gap-8">
|
|
||||||
<div>
|
|
||||||
<Button data-testid="default" {...props}>
|
|
||||||
Label
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button data-testid="small" size="s" {...props}>
|
|
||||||
Label
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button data-testid="default-disabled" {...props} disabled={true}>
|
|
||||||
Disabled
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
data-testid="small-disabled"
|
|
||||||
{...props}
|
|
||||||
disabled={true}
|
|
||||||
size="s"
|
|
||||||
>
|
|
||||||
Disabled
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Button data-testid="default-start-icon" {...props} startIcon="Flash">
|
|
||||||
Label
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
data-testid="small-start-icon"
|
|
||||||
{...props}
|
|
||||||
startIcon="Flash"
|
|
||||||
size="s"
|
|
||||||
>
|
|
||||||
Label
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
data-testid="default-disabled-start-icon"
|
|
||||||
{...props}
|
|
||||||
startIcon="Flash"
|
|
||||||
disabled={true}
|
|
||||||
>
|
|
||||||
Disabled
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
data-testid="small-disabled-start-icon"
|
|
||||||
{...props}
|
|
||||||
startIcon="Flash"
|
|
||||||
size="s"
|
|
||||||
disabled={true}
|
|
||||||
>
|
|
||||||
Disabled
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Button data-testid="default-end-icon" {...props} endIcon="Flash">
|
|
||||||
Label
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
data-testid="small-end-icon"
|
|
||||||
{...props}
|
|
||||||
endIcon="Flash"
|
|
||||||
size="s"
|
|
||||||
>
|
|
||||||
Label
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
data-testid="default-disabled-end-icon"
|
|
||||||
{...props}
|
|
||||||
endIcon="Flash"
|
|
||||||
disabled={true}
|
|
||||||
>
|
|
||||||
Disabled
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
data-testid="small-disabled-end-icon"
|
|
||||||
{...props}
|
|
||||||
endIcon="Flash"
|
|
||||||
size="s"
|
|
||||||
disabled={true}
|
|
||||||
>
|
|
||||||
Disabled
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button data-testid="default-icon" {...props} icon="Flash" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button data-testid="small-icon" {...props} icon="Flash" size="s" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
data-testid="default-disabled-icon"
|
|
||||||
{...props}
|
|
||||||
icon="Flash"
|
|
||||||
disabled={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
data-testid="small-disabled-icon"
|
|
||||||
{...props}
|
|
||||||
icon="Flash"
|
|
||||||
disabled={true}
|
|
||||||
size="s"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
const meta: Meta<ButtonProps> = {
|
|
||||||
title: "Components/Button",
|
|
||||||
component: ButtonExamples,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<ButtonProps>;
|
|
||||||
|
|
||||||
export const Primary: Story = {
|
|
||||||
args: {
|
|
||||||
hierarchy: "primary",
|
|
||||||
onAction: fn(async () => {
|
|
||||||
// wait 500 ms to simulate an action
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
||||||
// randomly fail to check that the loading state still returns to normal
|
|
||||||
if (Math.random() > 0.5) {
|
|
||||||
throw new Error("Action failure");
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
parameters: {
|
|
||||||
test: {
|
|
||||||
mockTimers: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
play: async ({ args, canvasElement, step }) => {
|
|
||||||
const canvas = within(canvasElement);
|
|
||||||
|
|
||||||
const buttons = await canvas.findAllByRole("button");
|
|
||||||
|
|
||||||
for (const button of buttons) {
|
|
||||||
const testID = button.getAttribute("data-testid");
|
|
||||||
|
|
||||||
// skip disabled buttons
|
|
||||||
if (button.hasAttribute("disabled")) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
await step(`Click on ${testID}`, async () => {
|
|
||||||
// check for the loader
|
|
||||||
const loaders = button.getElementsByClassName("loader");
|
|
||||||
await expect(loaders.length).toEqual(1);
|
|
||||||
|
|
||||||
// assert its width is 0 before we click
|
|
||||||
const [loader] = loaders;
|
|
||||||
await expect(loader.clientWidth).toEqual(0);
|
|
||||||
|
|
||||||
// move the mouse over the button
|
|
||||||
await userEvent.hover(button);
|
|
||||||
|
|
||||||
// the pointer should be normal
|
|
||||||
await expect(getCursorStyle(button)).toEqual("pointer");
|
|
||||||
|
|
||||||
// click the button
|
|
||||||
await userEvent.click(button);
|
|
||||||
|
|
||||||
// check the button has changed
|
|
||||||
await waitFor(async () => {
|
|
||||||
// the action handler should have been called
|
|
||||||
await expect(args.onAction).toHaveBeenCalled();
|
|
||||||
// the button should have a loading class
|
|
||||||
await expect(button).toHaveClass("loading");
|
|
||||||
// the loader should be visible
|
|
||||||
await expect(loader.clientWidth).toBeGreaterThan(0);
|
|
||||||
// the pointer should have changed to wait
|
|
||||||
await expect(getCursorStyle(button)).toEqual("wait");
|
|
||||||
});
|
|
||||||
|
|
||||||
// wait for the action handler to finish
|
|
||||||
await waitFor(async () => {
|
|
||||||
// the loading class should be removed
|
|
||||||
await expect(button).not.toHaveClass("loading");
|
|
||||||
// the loader should be hidden
|
|
||||||
await expect(loader.clientWidth).toEqual(0);
|
|
||||||
// the pointer should be normal
|
|
||||||
await expect(getCursorStyle(button)).toEqual("pointer");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Secondary: Story = {
|
|
||||||
args: {
|
|
||||||
...Primary.args,
|
|
||||||
hierarchy: "secondary",
|
|
||||||
},
|
|
||||||
play: Primary.play,
|
|
||||||
};
|
|
||||||
|
|
||||||
export const GhostPrimary: Story = {
|
|
||||||
args: {
|
|
||||||
...Primary.args,
|
|
||||||
hierarchy: "primary",
|
|
||||||
ghost: true,
|
|
||||||
},
|
|
||||||
play: Primary.play,
|
|
||||||
decorators: [
|
|
||||||
(Story) => (
|
|
||||||
<div class="p-10 bg-def-3">
|
|
||||||
<Story />
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
export const GhostSecondary: Story = {
|
|
||||||
args: {
|
|
||||||
...Primary.args,
|
|
||||||
hierarchy: "secondary",
|
|
||||||
ghost: true,
|
|
||||||
},
|
|
||||||
play: Primary.play,
|
|
||||||
};
|
|
||||||
@@ -1,116 +0,0 @@
|
|||||||
import { splitProps, type JSX, createSignal, Show } from "solid-js";
|
|
||||||
import cx from "classnames";
|
|
||||||
import { Typography } from "../Typography/Typography";
|
|
||||||
import { Button as KobalteButton } from "@kobalte/core/button";
|
|
||||||
|
|
||||||
import "./Button.css";
|
|
||||||
import Icon, { IconVariant } from "@/src/components/v2/Icon/Icon";
|
|
||||||
import { Loader } from "@/src/components/v2/Loader/Loader";
|
|
||||||
|
|
||||||
export type Size = "default" | "s";
|
|
||||||
export type Hierarchy = "primary" | "secondary";
|
|
||||||
|
|
||||||
export type Action = () => Promise<void>;
|
|
||||||
|
|
||||||
export interface ButtonProps
|
|
||||||
extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
||||||
hierarchy?: Hierarchy;
|
|
||||||
size?: Size;
|
|
||||||
ghost?: boolean;
|
|
||||||
children?: JSX.Element;
|
|
||||||
icon?: IconVariant;
|
|
||||||
startIcon?: IconVariant;
|
|
||||||
endIcon?: IconVariant;
|
|
||||||
class?: string;
|
|
||||||
onAction?: Action;
|
|
||||||
}
|
|
||||||
|
|
||||||
const iconSizes: Record<Size, string> = {
|
|
||||||
default: "1rem",
|
|
||||||
s: "0.8125rem",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Button = (props: ButtonProps) => {
|
|
||||||
const [local, other] = splitProps(props, [
|
|
||||||
"children",
|
|
||||||
"hierarchy",
|
|
||||||
"size",
|
|
||||||
"ghost",
|
|
||||||
"icon",
|
|
||||||
"startIcon",
|
|
||||||
"endIcon",
|
|
||||||
"class",
|
|
||||||
"onAction",
|
|
||||||
]);
|
|
||||||
|
|
||||||
const size = local.size || "default";
|
|
||||||
const hierarchy = local.hierarchy || "primary";
|
|
||||||
|
|
||||||
const [loading, setLoading] = createSignal(false);
|
|
||||||
|
|
||||||
const onClick = async () => {
|
|
||||||
if (!local.onAction) {
|
|
||||||
console.error("this should not be possible");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
await local.onAction();
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error while executing action", error);
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const iconSize = iconSizes[local.size || "default"];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<KobalteButton
|
|
||||||
class={cx(
|
|
||||||
local.class,
|
|
||||||
"button", // default button class
|
|
||||||
size,
|
|
||||||
hierarchy,
|
|
||||||
{
|
|
||||||
icon: local.icon,
|
|
||||||
loading: loading(),
|
|
||||||
ghost: local.ghost,
|
|
||||||
},
|
|
||||||
)}
|
|
||||||
onClick={local.onAction ? onClick : undefined}
|
|
||||||
{...other}
|
|
||||||
>
|
|
||||||
<Loader hierarchy={hierarchy} />
|
|
||||||
|
|
||||||
{local.startIcon && (
|
|
||||||
<Icon icon={local.startIcon} class="icon-start" size={iconSize} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{local.icon && !local.children && (
|
|
||||||
<Icon icon={local.icon} class="icon" size={iconSize} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{local.children && !local.icon && (
|
|
||||||
<Typography
|
|
||||||
class="label"
|
|
||||||
hierarchy="label"
|
|
||||||
family="mono"
|
|
||||||
size={local.size || "default"}
|
|
||||||
color="inherit"
|
|
||||||
inverted={local.hierarchy === "secondary"}
|
|
||||||
weight="bold"
|
|
||||||
tag="span"
|
|
||||||
>
|
|
||||||
{local.children}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{local.endIcon && (
|
|
||||||
<Icon icon={local.endIcon} class="icon-end" size={iconSize} />
|
|
||||||
)}
|
|
||||||
</KobalteButton>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,75 +0,0 @@
|
|||||||
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
|
|
||||||
import { Component, For } from "solid-js";
|
|
||||||
import Icon, { IconProps, IconVariant } from "./Icon";
|
|
||||||
|
|
||||||
const iconVariants: IconVariant[] = [
|
|
||||||
"ClanIcon",
|
|
||||||
"Checkmark",
|
|
||||||
"Paperclip",
|
|
||||||
"Expand",
|
|
||||||
"Plus",
|
|
||||||
"Trash",
|
|
||||||
"Folder",
|
|
||||||
"CaretRight",
|
|
||||||
"CaretLeft",
|
|
||||||
"CaretUp",
|
|
||||||
"CaretDown",
|
|
||||||
"Close",
|
|
||||||
"Flash",
|
|
||||||
"EyeClose",
|
|
||||||
"EyeOpen",
|
|
||||||
"Settings",
|
|
||||||
"Grid",
|
|
||||||
"List",
|
|
||||||
"Edit",
|
|
||||||
"Load",
|
|
||||||
"ArrowRight",
|
|
||||||
"ArrowLeft",
|
|
||||||
"ArrowTop",
|
|
||||||
"ArrowBottom",
|
|
||||||
"Info",
|
|
||||||
"Update",
|
|
||||||
"Reload",
|
|
||||||
"Search",
|
|
||||||
"Report",
|
|
||||||
"Cursor",
|
|
||||||
"More",
|
|
||||||
"Filter",
|
|
||||||
"Download",
|
|
||||||
"Attention",
|
|
||||||
"User",
|
|
||||||
"WarningFilled",
|
|
||||||
"Modules",
|
|
||||||
"NewMachine",
|
|
||||||
"AI",
|
|
||||||
"Heart",
|
|
||||||
"SearchFilled",
|
|
||||||
"Offline",
|
|
||||||
"Switch",
|
|
||||||
"Tag",
|
|
||||||
"Machine",
|
|
||||||
];
|
|
||||||
|
|
||||||
const IconExamples: Component<IconProps> = (props) => (
|
|
||||||
<div class="inline-flex flex-wrap gap-2">
|
|
||||||
<For each={iconVariants}>{(item) => <Icon {...props} icon={item} />}</For>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const meta: Meta<IconProps> = {
|
|
||||||
title: "Components/Icon",
|
|
||||||
component: IconExamples,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<IconProps>;
|
|
||||||
|
|
||||||
export const Default: Story = {};
|
|
||||||
|
|
||||||
export const Large: Story = {
|
|
||||||
args: {
|
|
||||||
width: "2rem",
|
|
||||||
height: "2rem",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,126 +0,0 @@
|
|||||||
import cx from "classnames";
|
|
||||||
import { Component, JSX, Show, splitProps } from "solid-js";
|
|
||||||
import ArrowBottom from "@/icons/arrow-bottom.svg";
|
|
||||||
import ArrowLeft from "@/icons/arrow-left.svg";
|
|
||||||
import ArrowRight from "@/icons/arrow-right.svg";
|
|
||||||
import ArrowTop from "@/icons/arrow-top.svg";
|
|
||||||
import Attention from "@/icons/attention.svg";
|
|
||||||
import CaretDown from "@/icons/caret-down.svg";
|
|
||||||
import CaretLeft from "@/icons/caret-left.svg";
|
|
||||||
import CaretRight from "@/icons/caret-right.svg";
|
|
||||||
import CaretUp from "@/icons/caret-up.svg";
|
|
||||||
import Checkmark from "@/icons/checkmark.svg";
|
|
||||||
import ClanIcon from "@/icons/clan-icon.svg";
|
|
||||||
import Cursor from "@/icons/cursor.svg";
|
|
||||||
import Close from "@/icons/close.svg";
|
|
||||||
import Download from "@/icons/download.svg";
|
|
||||||
import Edit from "@/icons/edit.svg";
|
|
||||||
import Expand from "@/icons/expand.svg";
|
|
||||||
import EyeClose from "@/icons/eye-close.svg";
|
|
||||||
import EyeOpen from "@/icons/eye-open.svg";
|
|
||||||
import Filter from "@/icons/filter.svg";
|
|
||||||
import Flash from "@/icons/flash.svg";
|
|
||||||
import Folder from "@/icons/folder.svg";
|
|
||||||
import Grid from "@/icons/grid.svg";
|
|
||||||
import Info from "@/icons/info.svg";
|
|
||||||
import List from "@/icons/list.svg";
|
|
||||||
import Load from "@/icons/load.svg";
|
|
||||||
import More from "@/icons/more.svg";
|
|
||||||
import Paperclip from "@/icons/paperclip.svg";
|
|
||||||
import Plus from "@/icons/plus.svg";
|
|
||||||
import Reload from "@/icons/reload.svg";
|
|
||||||
import Report from "@/icons/report.svg";
|
|
||||||
import Search from "@/icons/search.svg";
|
|
||||||
import Settings from "@/icons/settings.svg";
|
|
||||||
import Trash from "@/icons/trash.svg";
|
|
||||||
import Update from "@/icons/update.svg";
|
|
||||||
import WarningFilled from "@/icons/warning-filled.svg";
|
|
||||||
import Modules from "@/icons/modules.svg";
|
|
||||||
import NewMachine from "@/icons/new-machine.svg";
|
|
||||||
import AI from "@/icons/ai.svg";
|
|
||||||
import User from "@/icons/user.svg";
|
|
||||||
import Heart from "@/icons/heart.svg";
|
|
||||||
import SearchFilled from "@/icons/search-filled.svg";
|
|
||||||
import Offline from "@/icons/offline.svg";
|
|
||||||
import Switch from "@/icons/switch.svg";
|
|
||||||
import Tag from "@/icons/tag.svg";
|
|
||||||
import Machine from "@/icons/machine.svg";
|
|
||||||
import Loader from "@/icons/loader.svg";
|
|
||||||
import { Dynamic } from "solid-js/web";
|
|
||||||
|
|
||||||
const icons = {
|
|
||||||
AI,
|
|
||||||
ArrowBottom,
|
|
||||||
ArrowLeft,
|
|
||||||
ArrowRight,
|
|
||||||
ArrowTop,
|
|
||||||
Attention,
|
|
||||||
CaretDown,
|
|
||||||
CaretLeft,
|
|
||||||
CaretRight,
|
|
||||||
CaretUp,
|
|
||||||
Checkmark,
|
|
||||||
ClanIcon,
|
|
||||||
Close,
|
|
||||||
Cursor,
|
|
||||||
Download,
|
|
||||||
Edit,
|
|
||||||
Expand,
|
|
||||||
EyeClose,
|
|
||||||
EyeOpen,
|
|
||||||
Filter,
|
|
||||||
Flash,
|
|
||||||
Folder,
|
|
||||||
Grid,
|
|
||||||
Heart,
|
|
||||||
Info,
|
|
||||||
List,
|
|
||||||
Load,
|
|
||||||
Machine,
|
|
||||||
Modules,
|
|
||||||
More,
|
|
||||||
NewMachine,
|
|
||||||
Offline,
|
|
||||||
Paperclip,
|
|
||||||
Plus,
|
|
||||||
Reload,
|
|
||||||
Report,
|
|
||||||
Search,
|
|
||||||
SearchFilled,
|
|
||||||
Settings,
|
|
||||||
Switch,
|
|
||||||
Tag,
|
|
||||||
Trash,
|
|
||||||
Update,
|
|
||||||
User,
|
|
||||||
WarningFilled,
|
|
||||||
};
|
|
||||||
|
|
||||||
export type IconVariant = keyof typeof icons;
|
|
||||||
|
|
||||||
export interface IconProps extends JSX.SvgSVGAttributes<SVGElement> {
|
|
||||||
icon: IconVariant;
|
|
||||||
class?: string;
|
|
||||||
size?: number | string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Icon: Component<IconProps> = (props) => {
|
|
||||||
const [local, iconProps] = splitProps(props, ["icon", "class"]);
|
|
||||||
|
|
||||||
const IconComponent = () => icons[local.icon];
|
|
||||||
|
|
||||||
return IconComponent() ? (
|
|
||||||
<Dynamic
|
|
||||||
component={IconComponent()}
|
|
||||||
class={cx("icon", local.class)}
|
|
||||||
width={iconProps.size || "1em"}
|
|
||||||
height={iconProps.size || "1em"}
|
|
||||||
viewBox="0 0 48 48"
|
|
||||||
// @ts-expect-error: dont know, fix this type nit later
|
|
||||||
ref={iconProps.ref}
|
|
||||||
{...iconProps}
|
|
||||||
/>
|
|
||||||
) : undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Icon;
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,104 +0,0 @@
|
|||||||
.loader {
|
|
||||||
@apply relative;
|
|
||||||
@apply w-4 h-4;
|
|
||||||
|
|
||||||
&.primary {
|
|
||||||
& > div.wrapper > div.parent,
|
|
||||||
& > div.child {
|
|
||||||
background: #00ff57;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.secondary {
|
|
||||||
& > div.wrapper > div.parent,
|
|
||||||
& > div.child {
|
|
||||||
background: #0051ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div.wrapper {
|
|
||||||
@apply absolute top-0 left-0 w-full h-full;
|
|
||||||
|
|
||||||
transform: translate(0%, 0%) rotate(-45deg);
|
|
||||||
animation: moveLoaderWrapper 1.8s ease-in-out infinite;
|
|
||||||
|
|
||||||
& > div.parent {
|
|
||||||
@apply absolute top-1/2 left-1/2;
|
|
||||||
@apply w-2/3 h-2/3;
|
|
||||||
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: moveLoaderParent 1.8s ease-in-out infinite;
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .child {
|
|
||||||
@apply absolute z-10 top-1/2 left-1/2 w-1/2 h-1/2;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
animation: moveLoaderChild 1.8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes moveLoaderWrapper {
|
|
||||||
0% {
|
|
||||||
transform: translate(0%, 0%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
35% {
|
|
||||||
transform: translate(-25%, 0%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: translate(0%, 0%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
85% {
|
|
||||||
transform: translate(25%, 0%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes moveLoaderParent {
|
|
||||||
0% {
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
35% {
|
|
||||||
animation-timing-function: cubic-bezier(0.7, -0.9, 0.3, 3.2);
|
|
||||||
transform: translateX(-50%) translateY(-50%) skew(20deg, 20deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
transform: translateX(-50%) translateY(-50%) skew(0deg, 0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
85% {
|
|
||||||
animation-timing-function: cubic-bezier(0.7, -0.9, 0.3, 3.2);
|
|
||||||
transform: translateX(-50%) translateY(-50%) skew(20deg, 20deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes moveLoaderChild {
|
|
||||||
0% {
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
35% {
|
|
||||||
animation-timing-function: cubic-bezier(0.7, -0.9, 0.3, 3.2);
|
|
||||||
transform: translateX(50%) translateY(-50%) scale(0.56);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
85% {
|
|
||||||
animation-timing-function: cubic-bezier(0.7, -0.9, 0.3, 3.2);
|
|
||||||
transform: translateX(-150%) translateY(-50%) scale(0.56);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
|
|
||||||
import { Loader, LoaderProps } from "@/src/components/v2/Loader/Loader";
|
|
||||||
|
|
||||||
const meta: Meta<LoaderProps> = {
|
|
||||||
title: "Components/Loader",
|
|
||||||
component: Loader,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<LoaderProps>;
|
|
||||||
|
|
||||||
export const Primary: Story = {
|
|
||||||
args: {
|
|
||||||
hierarchy: "primary",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Secondary: Story = {
|
|
||||||
args: {
|
|
||||||
hierarchy: "secondary",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import "./Loader.css";
|
|
||||||
import cx from "classnames";
|
|
||||||
|
|
||||||
export type Hierarchy = "primary" | "secondary";
|
|
||||||
|
|
||||||
export interface LoaderProps {
|
|
||||||
hierarchy?: Hierarchy;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Loader = (props: LoaderProps) => {
|
|
||||||
return (
|
|
||||||
<div class={cx("loader", props.hierarchy || "primary")}>
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="parent"></div>
|
|
||||||
</div>
|
|
||||||
<div class="child"></div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Components/Loader Primary smoke-test 1`] = `
|
|
||||||
<div class="loader primary">
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="parent">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="child">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/Loader Secondary smoke-test 1`] = `
|
|
||||||
<div class="loader secondary">
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="parent">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="child">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
## Overview
|
|
||||||
|
|
||||||
We will be updating existing components and developing new components in line with the latest designs inside this
|
|
||||||
folder. As they become ready, they can be copied into the root `components` folder, replacing any existing components as
|
|
||||||
necessary.
|
|
||||||
|
|
||||||
This is to avoid merge hell and allow us to rapidly match the latest designs without the burden of integration.
|
|
||||||
@@ -1,154 +0,0 @@
|
|||||||
/* Body */
|
|
||||||
.typography {
|
|
||||||
&.font-weight-normal {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-weight-medium {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-weight-bold {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-body {
|
|
||||||
&.font-family-regular {
|
|
||||||
font-family: "Archivo", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-family-condensed {
|
|
||||||
font-family: "Archivo SemiCondensed", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-default {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.32;
|
|
||||||
letter-spacing: 0.02rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-s {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
line-height: 1.32;
|
|
||||||
letter-spacing: 0.0175rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-xs {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: 1.32;
|
|
||||||
letter-spacing: 0.0225rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-xxs {
|
|
||||||
font-size: 0.6875rem;
|
|
||||||
line-height: 1.32;
|
|
||||||
letter-spacing: 0.00688rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-label {
|
|
||||||
&.font-family-condensed {
|
|
||||||
font-family: "Archivo SemiCondensed", sans-serif;
|
|
||||||
|
|
||||||
&.font-size-default {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
line-height: 1.32;
|
|
||||||
letter-spacing: 0.0175rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-s {
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
line-height: 1.32;
|
|
||||||
letter-spacing: 0.0175rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-xs {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: 1.32;
|
|
||||||
letter-spacing: 0.0075rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-family-mono {
|
|
||||||
font-family: "Commit Mono", monospace;
|
|
||||||
|
|
||||||
&.font-size-default {
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
line-height: 0;
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-s {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: 0;
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-xs {
|
|
||||||
font-size: 0.6875rem;
|
|
||||||
line-height: 0;
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-title {
|
|
||||||
&.font-family-regular {
|
|
||||||
font-family: "Archivo", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-default {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
line-height: 124%;
|
|
||||||
letter-spacing: 0.03375rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-m {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
line-height: 124%;
|
|
||||||
letter-spacing: 0.0375rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-l {
|
|
||||||
font-size: 1.375rem;
|
|
||||||
line-height: 124%;
|
|
||||||
letter-spacing: 0.04125rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-headline {
|
|
||||||
&.font-family-regular {
|
|
||||||
font-family: "Archivo", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-default {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: 116%;
|
|
||||||
letter-spacing: 0.015rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-m {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
line-height: 116%;
|
|
||||||
letter-spacing: 0.0175rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-l {
|
|
||||||
font-size: 2rem;
|
|
||||||
line-height: 116%;
|
|
||||||
letter-spacing: 0.06rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-teaser {
|
|
||||||
&.font-family-regular {
|
|
||||||
font-family: "Archivo", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.font-size-default {
|
|
||||||
font-size: 3rem;
|
|
||||||
line-height: normal;
|
|
||||||
letter-spacing: -0.06rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import { DocsStory, Meta, Canvas } from "@storybook/blocks";
|
|
||||||
|
|
||||||
import * as TypographyStories from "./Typography.stories";
|
|
||||||
|
|
||||||
<Meta of={TypographyStories} />
|
|
||||||
|
|
||||||
# Typography
|
|
||||||
|
|
||||||
There are two fonts being used within our typography system:
|
|
||||||
|
|
||||||
- [Archivo] in its _Standard_ and _Semi Condensed_ forms
|
|
||||||
- [Fira Code] for mono-spaced content
|
|
||||||
|
|
||||||
## UI Components
|
|
||||||
|
|
||||||
When creating UI components that a user will interact with,
|
|
||||||
you must use the condensed form of `Body`, `Label` and `Label Mono`.
|
|
||||||
|
|
||||||
<DocsStory of={TypographyStories.BodyCondensed} />
|
|
||||||
|
|
||||||
<DocsStory of={TypographyStories.LabelCondensed} />
|
|
||||||
|
|
||||||
<DocsStory of={TypographyStories.LabelMono} />
|
|
||||||
|
|
||||||
## Layout & Prose
|
|
||||||
|
|
||||||
For layout components and general prose, you must use the non-condensed forms of `Body`, `Title`, `Headline` and
|
|
||||||
`Teaser`.
|
|
||||||
|
|
||||||
<DocsStory of={TypographyStories.Body} />
|
|
||||||
<DocsStory of={TypographyStories.Title} />
|
|
||||||
<DocsStory of={TypographyStories.Headline} />
|
|
||||||
<DocsStory of={TypographyStories.Teaser} />
|
|
||||||
|
|
||||||
## Colors
|
|
||||||
|
|
||||||
Text colors come in one of five varieties:
|
|
||||||
|
|
||||||
- `inherit` (which will inherit the text color from the parent)
|
|
||||||
- `primary`
|
|
||||||
- `secondary`
|
|
||||||
- `tertiary`
|
|
||||||
- `quaternary`
|
|
||||||
|
|
||||||
<DocsStory of={TypographyStories.Colors} />
|
|
||||||
|
|
||||||
Each color also has an inverted counterpart.
|
|
||||||
|
|
||||||
<DocsStory of={TypographyStories.ColorsInverted} />
|
|
||||||
|
|
||||||
[Archivo]: https://github.com/Omnibus-Type/Archivo
|
|
||||||
[Fira Code]: https://github.com/tonsky/FiraCode
|
|
||||||
@@ -1,166 +0,0 @@
|
|||||||
import type { Meta, StoryObj } from "@kachurun/storybook-solid";
|
|
||||||
|
|
||||||
import {
|
|
||||||
AllowedSizes,
|
|
||||||
Color,
|
|
||||||
Family,
|
|
||||||
Hierarchy,
|
|
||||||
Typography,
|
|
||||||
Weight,
|
|
||||||
} from "./Typography";
|
|
||||||
import { Component, For, Show } from "solid-js";
|
|
||||||
|
|
||||||
interface TypographyExamplesProps {
|
|
||||||
weights: Weight[];
|
|
||||||
sizes: ("default" | "s" | "xs" | "xxs" | "m" | "l")[];
|
|
||||||
hierarchy: Hierarchy;
|
|
||||||
colors?: boolean;
|
|
||||||
family?: Family;
|
|
||||||
inverted?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const colors: (Color | "inherit")[] = [
|
|
||||||
"inherit",
|
|
||||||
"primary",
|
|
||||||
"secondary",
|
|
||||||
"tertiary",
|
|
||||||
"quaternary",
|
|
||||||
];
|
|
||||||
|
|
||||||
const TypographyExamples: Component<TypographyExamplesProps> = (props) => (
|
|
||||||
<table
|
|
||||||
class="w-full min-w-max table-auto text-left"
|
|
||||||
classList={{
|
|
||||||
"text-white bg-inv-1": props.inverted,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<tbody>
|
|
||||||
<For each={props.sizes}>
|
|
||||||
{(size) => (
|
|
||||||
<tr
|
|
||||||
class="border-b border-def-3 even:bg-def-2"
|
|
||||||
classList={{
|
|
||||||
"border-inv-3 even:bg-inv-2": props.inverted,
|
|
||||||
"border-def-3 even:bg-def-2": !props.inverted,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<For each={props.weights}>
|
|
||||||
{(weight) => (
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<Show when={!props.colors}>
|
|
||||||
<Typography
|
|
||||||
hierarchy={props.hierarchy}
|
|
||||||
//@ts-expect-error: difficult to generify for the story
|
|
||||||
size={size}
|
|
||||||
weight={weight}
|
|
||||||
family={props.family}
|
|
||||||
>
|
|
||||||
{props.hierarchy} / {size} / {weight}
|
|
||||||
</Typography>
|
|
||||||
</Show>
|
|
||||||
<Show when={props.colors}>
|
|
||||||
<For each={colors}>
|
|
||||||
{(color) => (
|
|
||||||
<>
|
|
||||||
<Typography
|
|
||||||
hierarchy={props.hierarchy}
|
|
||||||
//@ts-expect-error: difficult to generify for the story
|
|
||||||
size={size}
|
|
||||||
weight={weight}
|
|
||||||
color={color}
|
|
||||||
family={props.family}
|
|
||||||
inverted={props.inverted}
|
|
||||||
>
|
|
||||||
{props.hierarchy} / {size} / {weight} / {color}
|
|
||||||
</Typography>
|
|
||||||
<br />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
</td>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
);
|
|
||||||
|
|
||||||
const meta: Meta<TypographyExamplesProps> = {
|
|
||||||
title: "Components/Typography",
|
|
||||||
component: TypographyExamples,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<TypographyExamplesProps>;
|
|
||||||
|
|
||||||
export const BodyCondensed: Story = {
|
|
||||||
args: {
|
|
||||||
hierarchy: "body",
|
|
||||||
sizes: ["default", "s", "xs", "xxs"],
|
|
||||||
weights: ["normal", "medium", "bold"],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Body: Story = {
|
|
||||||
args: {
|
|
||||||
...BodyCondensed.args,
|
|
||||||
family: "regular",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const LabelCondensed: Story = {
|
|
||||||
args: {
|
|
||||||
hierarchy: "label",
|
|
||||||
sizes: ["default", "s", "xs"],
|
|
||||||
weights: ["normal", "medium", "bold"],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const LabelMono: Story = {
|
|
||||||
args: {
|
|
||||||
...LabelCondensed.args,
|
|
||||||
family: "mono",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Title: Story = {
|
|
||||||
args: {
|
|
||||||
hierarchy: "title",
|
|
||||||
sizes: ["default", "m", "l"],
|
|
||||||
weights: ["normal", "medium", "bold"],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Headline: Story = {
|
|
||||||
args: {
|
|
||||||
hierarchy: "headline",
|
|
||||||
sizes: ["default", "m", "l"],
|
|
||||||
weights: ["normal", "medium", "bold"],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Teaser: Story = {
|
|
||||||
args: {
|
|
||||||
hierarchy: "teaser",
|
|
||||||
sizes: ["default"],
|
|
||||||
weights: ["bold"],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Colors: Story = {
|
|
||||||
args: {
|
|
||||||
...BodyCondensed.args,
|
|
||||||
colors: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ColorsInverted: Story = {
|
|
||||||
args: {
|
|
||||||
...Colors.args,
|
|
||||||
inverted: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,152 +0,0 @@
|
|||||||
import { type JSX, mergeProps } from "solid-js";
|
|
||||||
import { Dynamic } from "solid-js/web";
|
|
||||||
import cx from "classnames";
|
|
||||||
import "./Typography.css";
|
|
||||||
|
|
||||||
export type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "div";
|
|
||||||
export type Color = "primary" | "secondary" | "tertiary" | "quaternary";
|
|
||||||
export type Hierarchy = "body" | "title" | "headline" | "label" | "teaser";
|
|
||||||
export type Weight = "normal" | "medium" | "bold";
|
|
||||||
export type Family = "regular" | "condensed" | "mono";
|
|
||||||
|
|
||||||
const colorMap: Record<Color, string> = {
|
|
||||||
primary: cx("fg-def-1"),
|
|
||||||
secondary: cx("fg-def-2"),
|
|
||||||
tertiary: cx("fg-def-3"),
|
|
||||||
quaternary: cx("fg-def-4"),
|
|
||||||
};
|
|
||||||
|
|
||||||
const invertedColorMap: Record<Color, string> = {
|
|
||||||
primary: cx("fg-inv-1"),
|
|
||||||
secondary: cx("fg-inv-2"),
|
|
||||||
tertiary: cx("fg-inv-3"),
|
|
||||||
quaternary: cx("fg-inv-4"),
|
|
||||||
};
|
|
||||||
|
|
||||||
const colorFor = (color: Color | "inherit" = "primary", inverted = false) => {
|
|
||||||
if (color === "inherit") {
|
|
||||||
return "text-inherit";
|
|
||||||
}
|
|
||||||
|
|
||||||
return inverted ? invertedColorMap[color] : colorMap[color];
|
|
||||||
};
|
|
||||||
|
|
||||||
// type Size = "default" | "xs" | "s" | "m" | "l";
|
|
||||||
interface SizeForHierarchy {
|
|
||||||
body: {
|
|
||||||
default: string;
|
|
||||||
s: string;
|
|
||||||
xs: string;
|
|
||||||
xxs: string;
|
|
||||||
};
|
|
||||||
label: {
|
|
||||||
default: string;
|
|
||||||
s: string;
|
|
||||||
xs: string;
|
|
||||||
};
|
|
||||||
headline: {
|
|
||||||
default: string;
|
|
||||||
m: string;
|
|
||||||
l: string;
|
|
||||||
};
|
|
||||||
title: {
|
|
||||||
default: string;
|
|
||||||
m: string;
|
|
||||||
l: string;
|
|
||||||
};
|
|
||||||
teaser: {
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export type AllowedSizes<H extends Hierarchy> = keyof SizeForHierarchy[H];
|
|
||||||
|
|
||||||
const sizeHierarchyMap: SizeForHierarchy = {
|
|
||||||
body: {
|
|
||||||
default: cx("font-size-default"),
|
|
||||||
s: cx("font-size-s"),
|
|
||||||
xs: cx("font-size-xs"),
|
|
||||||
xxs: cx("font-size-xxs"),
|
|
||||||
},
|
|
||||||
headline: {
|
|
||||||
default: cx("font-size-default"),
|
|
||||||
m: cx("font-size-m"),
|
|
||||||
l: cx("font-size-l"),
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
default: cx("font-size-default"),
|
|
||||||
// xs: cx("font-size-xs"),
|
|
||||||
// s: cx("font-size-s"),
|
|
||||||
m: cx("font-size-m"),
|
|
||||||
l: cx("font-size-l"),
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
default: cx("font-size-default"),
|
|
||||||
s: cx("font-size-s"),
|
|
||||||
xs: cx("font-size-xs"),
|
|
||||||
},
|
|
||||||
teaser: {
|
|
||||||
default: cx("font-size-default"),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const defaultFamilyMap: Record<Hierarchy, Family> = {
|
|
||||||
body: "condensed",
|
|
||||||
label: "condensed",
|
|
||||||
title: "regular",
|
|
||||||
headline: "regular",
|
|
||||||
teaser: "regular",
|
|
||||||
};
|
|
||||||
|
|
||||||
const weightMap: Record<Weight, string> = {
|
|
||||||
normal: cx("font-weight-normal"),
|
|
||||||
medium: cx("font-weight-medium"),
|
|
||||||
bold: cx("font-weight-bold"),
|
|
||||||
};
|
|
||||||
|
|
||||||
interface _TypographyProps<H extends Hierarchy> {
|
|
||||||
hierarchy: H;
|
|
||||||
size: AllowedSizes<H>;
|
|
||||||
color?: Color | "inherit";
|
|
||||||
children: JSX.Element;
|
|
||||||
weight?: Weight;
|
|
||||||
family?: Family;
|
|
||||||
inverted?: boolean;
|
|
||||||
tag?: Tag;
|
|
||||||
class?: string;
|
|
||||||
classList?: Record<string, boolean>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Typography = <H extends Hierarchy>(props: _TypographyProps<H>) => {
|
|
||||||
const family = () =>
|
|
||||||
`font-family-${props.family || defaultFamilyMap[props.hierarchy]}`;
|
|
||||||
|
|
||||||
const color = () => colorFor(props.color, props.inverted);
|
|
||||||
|
|
||||||
const classList = mergeProps(props.classList, {
|
|
||||||
"font-body": props.hierarchy === "body" || !props.hierarchy,
|
|
||||||
"font-label": props.hierarchy === "label",
|
|
||||||
"font-title": props.hierarchy === "title",
|
|
||||||
"font-headline": props.hierarchy === "headline",
|
|
||||||
"font-teaser": props.hierarchy === "teaser",
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dynamic
|
|
||||||
class={cx(
|
|
||||||
"typography",
|
|
||||||
color(),
|
|
||||||
family(),
|
|
||||||
weightMap[props.weight || "normal"],
|
|
||||||
sizeHierarchyMap[props.hierarchy][props.size] as string,
|
|
||||||
props.class,
|
|
||||||
)}
|
|
||||||
component={props.tag || "span"}
|
|
||||||
classList={classList}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</Dynamic>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export type TypographyProps = _TypographyProps<Hierarchy>;
|
|
||||||
@@ -1,955 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Components/Typography Body smoke-test 1`] = `
|
|
||||||
<table class="w-full min-w-max table-auto text-left">
|
|
||||||
<tbody>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/Typography BodyCondensed smoke-test 1`] = `
|
|
||||||
<table class="w-full min-w-max table-auto text-left">
|
|
||||||
<tbody>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/Typography Colors smoke-test 1`] = `
|
|
||||||
<table class="w-full min-w-max table-auto text-left">
|
|
||||||
<tbody>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/Typography ColorsInverted smoke-test 1`] = `
|
|
||||||
<table class="w-full min-w-max table-auto text-left text-white bg-inv-1">
|
|
||||||
<tbody>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-default font-body">
|
|
||||||
body / default / normal / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-default font-body">
|
|
||||||
body / default / medium / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-default font-body">
|
|
||||||
body / default / bold / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-s font-body">
|
|
||||||
body / s / normal / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-s font-body">
|
|
||||||
body / s / medium / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-s font-body">
|
|
||||||
body / s / bold / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-xs font-body">
|
|
||||||
body / xs / normal / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-xs font-body">
|
|
||||||
body / xs / medium / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-xs font-body">
|
|
||||||
body / xs / bold / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-xxs font-body">
|
|
||||||
body / xxs / normal / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-xxs font-body">
|
|
||||||
body / xxs / medium / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography text-inherit font-family-condensed font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold / inherit
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold / primary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold / secondary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold / tertiary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-xxs font-body">
|
|
||||||
body / xxs / bold / quaternary
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/Typography Headline smoke-test 1`] = `
|
|
||||||
<table class="w-full min-w-max table-auto text-left">
|
|
||||||
<tbody>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-headline">
|
|
||||||
headline / default / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-headline">
|
|
||||||
headline / default / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-headline">
|
|
||||||
headline / default / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-m font-headline">
|
|
||||||
headline / m / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-m font-headline">
|
|
||||||
headline / m / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-m font-headline">
|
|
||||||
headline / m / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-l font-headline">
|
|
||||||
headline / l / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-l font-headline">
|
|
||||||
headline / l / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-l font-headline">
|
|
||||||
headline / l / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/Typography LabelCondensed smoke-test 1`] = `
|
|
||||||
<table class="w-full min-w-max table-auto text-left">
|
|
||||||
<tbody>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-label">
|
|
||||||
label / default / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-label">
|
|
||||||
label / default / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-label">
|
|
||||||
label / default / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-label">
|
|
||||||
label / s / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-label">
|
|
||||||
label / s / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-label">
|
|
||||||
label / s / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-label">
|
|
||||||
label / xs / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-label">
|
|
||||||
label / xs / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-label">
|
|
||||||
label / xs / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/Typography LabelMono smoke-test 1`] = `
|
|
||||||
<table class="w-full min-w-max table-auto text-left">
|
|
||||||
<tbody>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-mono font-weight-normal font-size-default font-label">
|
|
||||||
label / default / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-mono font-weight-medium font-size-default font-label">
|
|
||||||
label / default / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-mono font-weight-bold font-size-default font-label">
|
|
||||||
label / default / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-mono font-weight-normal font-size-s font-label">
|
|
||||||
label / s / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-mono font-weight-medium font-size-s font-label">
|
|
||||||
label / s / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-mono font-weight-bold font-size-s font-label">
|
|
||||||
label / s / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-mono font-weight-normal font-size-xs font-label">
|
|
||||||
label / xs / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-mono font-weight-medium font-size-xs font-label">
|
|
||||||
label / xs / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-mono font-weight-bold font-size-xs font-label">
|
|
||||||
label / xs / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/Typography Teaser smoke-test 1`] = `
|
|
||||||
<table class="w-full min-w-max table-auto text-left">
|
|
||||||
<tbody>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-teaser">
|
|
||||||
teaser / default / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Components/Typography Title smoke-test 1`] = `
|
|
||||||
<table class="w-full min-w-max table-auto text-left">
|
|
||||||
<tbody>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-title">
|
|
||||||
title / default / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-title">
|
|
||||||
title / default / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-title">
|
|
||||||
title / default / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-m font-title">
|
|
||||||
title / m / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-m font-title">
|
|
||||||
title / m / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-m font-title">
|
|
||||||
title / m / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="border-b border-def-3 even:bg-def-2">
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-normal font-size-l font-title">
|
|
||||||
title / l / normal
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-medium font-size-l font-title">
|
|
||||||
title / l / medium
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-2 ">
|
|
||||||
<span class="typography fg-def-1 font-family-regular font-weight-bold font-size-l font-title">
|
|
||||||
title / l / bold
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`;
|
|
||||||
@@ -1,105 +0,0 @@
|
|||||||
@import "material-icons/iconfont/filled.css";
|
|
||||||
/* List of icons: https://marella.me/material-icons/demo/ */
|
|
||||||
/* @import url(./components/Typography/css/typography.css); */
|
|
||||||
|
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Archivo";
|
|
||||||
font-weight: 400;
|
|
||||||
src: url(../../../.fonts/Archivo-Regular.woff2) format("woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Archivo";
|
|
||||||
font-weight: 500;
|
|
||||||
src: url(../../../.fonts/Archivo-Medium.woff2) format("woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Archivo";
|
|
||||||
font-weight: 600;
|
|
||||||
src: url(../../../.fonts/Archivo-SemiBold.woff2) format("woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Archivo SemiCondensed";
|
|
||||||
font-weight: 400;
|
|
||||||
src: url(../../../.fonts/ArchivoSemiCondensed-Regular.woff2) format("woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Archivo SemiCondensed";
|
|
||||||
font-weight: 500;
|
|
||||||
src: url(../../../.fonts/ArchivoSemiCondensed-Medium.woff2) format("woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Archivo SemiCondensed";
|
|
||||||
font-weight: 600;
|
|
||||||
src: url(../../../.fonts/ArchivoSemiCondensed-SemiBold.woff2) format("woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Commit Mono";
|
|
||||||
font-weight: 400;
|
|
||||||
src: url(../../../.fonts/CommitMono-400-Regular.otf) format("otf");
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--clr-bg-def-1: theme(colors.white);
|
|
||||||
--clr-bg-def-2: theme(colors.primary.50);
|
|
||||||
--clr-bg-def-3: theme(colors.secondary.100);
|
|
||||||
--clr-bg-def-4: theme(colors.secondary.200);
|
|
||||||
|
|
||||||
--clr-border-def-1: theme(colors.secondary.50);
|
|
||||||
--clr-border-def-2: theme(colors.secondary.100);
|
|
||||||
--clr-border-def-3: theme(colors.secondary.200);
|
|
||||||
--clr-border-def-4: theme(colors.secondary.300);
|
|
||||||
|
|
||||||
--clr-border-def-sem-inf-1: theme(colors.info.500);
|
|
||||||
--clr-border-def-sem-inf-2: theme(colors.info.600);
|
|
||||||
--clr-border-def-sem-inf-3: theme(colors.info.700);
|
|
||||||
--clr-border-def-sem-inf-4: theme(colors.info.800);
|
|
||||||
|
|
||||||
--clr-bg-inv-1: theme(colors.primary.600);
|
|
||||||
--clr-bg-inv-2: theme(colors.primary.700);
|
|
||||||
--clr-bg-inv-3: theme(colors.primary.800);
|
|
||||||
--clr-bg-inv-4: theme(colors.primary.900);
|
|
||||||
|
|
||||||
--clr-border-inv-1: theme(colors.secondary.700);
|
|
||||||
--clr-border-inv-2: theme(colors.secondary.800);
|
|
||||||
--clr-border-inv-3: theme(colors.secondary.900);
|
|
||||||
--clr-border-inv-4: theme(colors.secondary.950);
|
|
||||||
|
|
||||||
--clr-bg-inv-acc-1: theme(colors.secondary.500);
|
|
||||||
--clr-bg-inv-acc-2: theme(colors.secondary.600);
|
|
||||||
--clr-bg-inv-acc-3: theme(colors.secondary.700);
|
|
||||||
|
|
||||||
--clr-fg-def-1: theme(colors.secondary.950);
|
|
||||||
--clr-fg-def-2: theme(colors.secondary.900);
|
|
||||||
--clr-fg-def-3: theme(colors.secondary.700);
|
|
||||||
--clr-fg-def-4: theme(colors.secondary.400);
|
|
||||||
|
|
||||||
--clr-fg-inv-1: theme(colors.white);
|
|
||||||
--clr-fg-inv-2: theme(colors.secondary.100);
|
|
||||||
--clr-fg-inv-3: theme(colors.secondary.300);
|
|
||||||
--clr-fg-inv-4: theme(colors.secondary.400);
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
@apply font-sans;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: hidden;
|
|
||||||
|
|
||||||
-webkit-user-select: none;
|
|
||||||
/* Safari */
|
|
||||||
-moz-user-select: none;
|
|
||||||
/* Firefox */
|
|
||||||
-ms-user-select: none;
|
|
||||||
/* Internet Explorer/Edge */
|
|
||||||
user-select: none;
|
|
||||||
/* Standard */
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user