chore: prettier
zomars
parent
aa5e2ac9a5
commit
8071016848
|
|
@ -5,7 +5,6 @@ on:
|
|||
types:
|
||||
- opened
|
||||
|
||||
|
||||
jobs:
|
||||
label_on_pr:
|
||||
runs-on: ubuntu-latest
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# .github/workflows/chromatic.yml
|
||||
|
||||
# Workflow name
|
||||
name: 'Chromatic'
|
||||
name: "Chromatic"
|
||||
|
||||
# Event for the workflow
|
||||
on:
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ on: # yamllint disable-line rule:truthy
|
|||
workflow_dispatch:
|
||||
inputs:
|
||||
RELEASE_TAG:
|
||||
description: 'v{Major}.{Minor}.{Patch}'
|
||||
description: "v{Major}.{Minor}.{Patch}"
|
||||
|
||||
jobs:
|
||||
release:
|
||||
|
|
@ -21,7 +21,7 @@ jobs:
|
|||
uses: actions/checkout@v3
|
||||
|
||||
- name: "Determine tag"
|
||||
run: "echo \"RELEASE_TAG=${GITHUB_REF#refs/tags/}\" >> $GITHUB_ENV"
|
||||
run: 'echo "RELEASE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV'
|
||||
|
||||
- name: "Run remote release workflow"
|
||||
uses: "actions/github-script@v6"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# Set the version of docker compose to use
|
||||
version: '3.9'
|
||||
version: "3.9"
|
||||
|
||||
# The containers that compose the project
|
||||
services:
|
||||
|
|
@ -8,7 +8,7 @@ services:
|
|||
restart: always
|
||||
container_name: integration-tests-prisma
|
||||
ports:
|
||||
- '5433:5432'
|
||||
- "5433:5432"
|
||||
environment:
|
||||
POSTGRES_USER: prisma
|
||||
POSTGRES_PASSWORD: prisma
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
window.global = window;
|
||||
window.isEmbed = () => {
|
||||
return location.search.includes("embed=")
|
||||
}
|
||||
return location.search.includes("embed=");
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,21 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="Introduction" />
|
||||
|
||||
<div className="text-center flex flex-col items-center">
|
||||
<h1 style={{marginBottom: '24px', marginTop: '36px'}}>Welcome to Cal.com UI</h1>
|
||||
<p>This is the beginning of our storybook improvements to match Figma as close as possible. Like our Figma library, we will be adding more components as we go along.</p>
|
||||
<p>Our <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">Figma</a> library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to the design team.</p>
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<h1 style={{ marginBottom: "24px", marginTop: "36px" }}>Welcome to Cal.com UI</h1>
|
||||
<p>
|
||||
This is the beginning of our storybook improvements to match Figma as close as possible. Like our Figma
|
||||
library, we will be adding more components as we go along.
|
||||
</p>
|
||||
<p>
|
||||
Our{" "}
|
||||
<a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">
|
||||
Figma
|
||||
</a>{" "}
|
||||
library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to
|
||||
the design team.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img src="/sb-cover.jpg" />
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
@import url("../../../packages/features/calendars/weeklyview/styles/styles.css");
|
||||
|
||||
.sbdocs {
|
||||
font-family: 'Inter var' !important;
|
||||
font-family: "Inter var" !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
|
||||
.docblock-argstable-body div p,
|
||||
.docblock-argstable-body div span {
|
||||
color: #8F8F8F !important;
|
||||
color: #8f8f8f !important;
|
||||
}
|
||||
|
||||
/** Custom components **/
|
||||
|
|
@ -83,8 +83,8 @@
|
|||
}
|
||||
|
||||
.story-title h1 span {
|
||||
color: #9CA3AF;
|
||||
font-family: 'Inter var';
|
||||
color: #9ca3af;
|
||||
font-family: "Inter var";
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
}
|
||||
|
||||
.examples {
|
||||
background-color: #F9FAFB;
|
||||
background-color: #f9fafb;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -111,14 +111,14 @@
|
|||
}
|
||||
|
||||
.examples-title {
|
||||
color: #8F8F8F;
|
||||
color: #8f8f8f;
|
||||
font-size: 14px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.examples-item-title {
|
||||
font-size: 12px;
|
||||
color: #8F8F8F;
|
||||
color: #8f8f8f;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
.examples-footnote p,
|
||||
.examples-footnote ul,
|
||||
.examples-footnote li {
|
||||
color: #8F8F8F;
|
||||
color: #8f8f8f;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
}
|
||||
|
||||
.story-note {
|
||||
background-color: #F9FAFB;
|
||||
background-color: #f9fafb;
|
||||
font-size: 14px;
|
||||
padding: 20px;
|
||||
margin-bottom: 12px;
|
||||
|
|
@ -198,38 +198,37 @@
|
|||
:root {
|
||||
/* background */
|
||||
|
||||
--cal-bg-emphasis: #E5E7EB;
|
||||
--cal-bg-emphasis: #e5e7eb;
|
||||
--cal-bg: white;
|
||||
--cal-bg-subtle: #F3F4F6;
|
||||
--cal-bg-muted: #F9FAFB;
|
||||
--cal-bg-subtle: #f3f4f6;
|
||||
--cal-bg-muted: #f9fafb;
|
||||
--cal-bg-inverted: #111827;
|
||||
|
||||
/* background -> components*/
|
||||
--cal-bg-info: #DEE9FC;
|
||||
--cal-bg-success: #E2FBE8;
|
||||
--cal-bg-attention: #FCEED8;
|
||||
--cal-bg-error: #F9E3E2;
|
||||
--cal-bg-info: #dee9fc;
|
||||
--cal-bg-success: #e2fbe8;
|
||||
--cal-bg-attention: #fceed8;
|
||||
--cal-bg-error: #f9e3e2;
|
||||
--cal-bg-dark-error: #752522;
|
||||
|
||||
|
||||
/* Borders */
|
||||
--cal-border-emphasis:#9CA3AF;
|
||||
--cal-border: #D1D5DB;
|
||||
--cal-border-subtle:#E5E7EB;
|
||||
--cal-border-muted:#F3F4F6;
|
||||
--cal-border-emphasis: #9ca3af;
|
||||
--cal-border: #d1d5db;
|
||||
--cal-border-subtle: #e5e7eb;
|
||||
--cal-border-muted: #f3f4f6;
|
||||
--cal-border-error: #aa2e26;
|
||||
|
||||
/* Content/Text */
|
||||
--cal-text-emphasis: #111827;
|
||||
--cal-text: #374151;
|
||||
--cal-text-subtle:#6B7280;
|
||||
--cal-text-muted:#9CA3AF;
|
||||
--cal-text-subtle: #6b7280;
|
||||
--cal-text-muted: #9ca3af;
|
||||
--cal-text-inverted: white;
|
||||
|
||||
/* Content/Text -> components */
|
||||
--cal-text-info: #253985;
|
||||
--cal-text-success: #285231;
|
||||
--cal-text-attention:#73321B;
|
||||
--cal-text-attention: #73321b;
|
||||
--cal-text-error: #752522;
|
||||
|
||||
/* Brand shinanigans
|
||||
|
|
@ -242,30 +241,29 @@
|
|||
.dark {
|
||||
/* background */
|
||||
|
||||
--cal-bg-emphasis: #2B2B2B;
|
||||
--cal-bg-emphasis: #2b2b2b;
|
||||
--cal-bg: #101010;
|
||||
--cal-bg-subtle: #2B2B2B;
|
||||
--cal-bg-muted: #1C1C1C;
|
||||
--cal-bg-inverted: #F3F4F6;
|
||||
--cal-bg-subtle: #2b2b2b;
|
||||
--cal-bg-muted: #1c1c1c;
|
||||
--cal-bg-inverted: #f3f4f6;
|
||||
|
||||
/* background -> components*/
|
||||
--cal-bg-info: #DEE9FC;
|
||||
--cal-bg-success: #E2FBE8;
|
||||
--cal-bg-attention: #FCEED8;
|
||||
--cal-bg-error: #F9E3E2;
|
||||
--cal-bg-info: #dee9fc;
|
||||
--cal-bg-success: #e2fbe8;
|
||||
--cal-bg-attention: #fceed8;
|
||||
--cal-bg-error: #f9e3e2;
|
||||
--cal-bg-dark-error: #752522;
|
||||
|
||||
|
||||
/* Borders */
|
||||
--cal-border-emphasis: #575757;
|
||||
--cal-border: #444444;
|
||||
--cal-border-subtle: #2B2B2B;
|
||||
--cal-border-muted: #1C1C1C;
|
||||
--cal-border-subtle: #2b2b2b;
|
||||
--cal-border-muted: #1c1c1c;
|
||||
--cal-border-error: #aa2e26;
|
||||
|
||||
/* Content/Text */
|
||||
--cal-text-emphasis: #F3F4F6;
|
||||
--cal-text: #D6D6D6;
|
||||
--cal-text-emphasis: #f3f4f6;
|
||||
--cal-text: #d6d6d6;
|
||||
--cal-text-subtle: #757575;
|
||||
--cal-text-muted: #575757;
|
||||
--cal-text-inverted: #101010;
|
||||
|
|
@ -273,7 +271,7 @@
|
|||
/* Content/Text -> components */
|
||||
--cal-text-info: #253985;
|
||||
--cal-text-success: #285231;
|
||||
--cal-text-attention: #73321B;
|
||||
--cal-text-attention: #73321b;
|
||||
--cal-text-error: #752522;
|
||||
|
||||
/* Brand shenanigans
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ html,
|
|||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
|
||||
Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -73,7 +73,8 @@ a {
|
|||
.swagger-ui .info .title small {
|
||||
top: 5px;
|
||||
}
|
||||
.swagger-ui a.nostyle, .swagger-ui a.nostyle:visited {
|
||||
.swagger-ui a.nostyle,
|
||||
.swagger-ui a.nostyle:visited {
|
||||
width: 100%;
|
||||
}
|
||||
div.request-snippets > div.curl-command > div:nth-child(1) {
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
/* Content/Text */
|
||||
--cal-text-emphasis: #f3f4f6;
|
||||
--cal-text: #d6d6d6;
|
||||
--cal-text-subtle: #A5a5a5;
|
||||
--cal-text-subtle: #a5a5a5;
|
||||
--cal-text-muted: #575757;
|
||||
--cal-text-inverted: #101010;
|
||||
|
||||
|
|
@ -108,8 +108,6 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Desktop App specific CSS
|
||||
https://docs.todesktop.com/
|
||||
|
|
@ -176,11 +174,11 @@ html.todesktop-platform-darwin .desktop-transparent{
|
|||
}
|
||||
|
||||
html.todesktop-platform-darwin.dark main.bg-default {
|
||||
background: rgba(0,0,0,0.6) !important
|
||||
background: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
html.todesktop-platform-darwin.light main.bg-default {
|
||||
background: rgba(255,255,255,0.8) !important
|
||||
background: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -247,13 +245,10 @@ select:focus {
|
|||
border-color: var(--brand-color);
|
||||
}
|
||||
|
||||
|
||||
@layer components {
|
||||
.scroll-bar {
|
||||
@apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* TODO: avoid global specific css */
|
||||
|
|
@ -261,7 +256,6 @@ select:focus {
|
|||
transform: translateX(16px);
|
||||
} */
|
||||
|
||||
|
||||
@layer components {
|
||||
/* slider */
|
||||
.slider {
|
||||
|
|
@ -512,5 +506,5 @@ select:focus {
|
|||
}
|
||||
|
||||
.react-tel-input .flag-dropdown {
|
||||
@apply !border-r-default !border-y-0 !border-l-0 left-0.5;
|
||||
@apply !border-r-default left-0.5 !border-y-0 !border-l-0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# Set the version of docker compose to use
|
||||
version: '3.9'
|
||||
version: "3.9"
|
||||
|
||||
# The containers that compose the project
|
||||
services:
|
||||
|
|
@ -8,7 +8,7 @@ services:
|
|||
restart: always
|
||||
container_name: integration-tests-prisma
|
||||
ports:
|
||||
- '5433:5432'
|
||||
- "5433:5432"
|
||||
environment:
|
||||
POSTGRES_USER: prisma
|
||||
POSTGRES_PASSWORD: prisma
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@ files: [
|
|||
# e.g. "/resources/%two_letters_code%/%original_file_name%"
|
||||
#
|
||||
"translation": "/apps/web/public/static/locales/%two_letters_code%/%original_file_name%",
|
||||
|
||||
#
|
||||
# Files or directories for ignore
|
||||
# e.g. ["/**/?.txt", "/**/[0-9].txt", "/**/*\?*.txt"]
|
||||
|
|
@ -123,5 +122,5 @@ files: [
|
|||
# e.g. "identifier,source_phrase,context,uk,ru,fr"
|
||||
#
|
||||
# "scheme" : "",
|
||||
}
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
|
||||
// see https://inlang.com/
|
||||
export async function defineConfig(env) {
|
||||
|
||||
const { default: i18nextPlugin } = await env.$import(
|
||||
"https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@2/dist/index.js",
|
||||
)
|
||||
"https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@2/dist/index.js"
|
||||
);
|
||||
|
||||
const { default: standardLintRules } = await env.$import(
|
||||
"https://cdn.jsdelivr.net/npm/@inlang/plugin-standard-lint-rules@3/dist/index.js",
|
||||
)
|
||||
"https://cdn.jsdelivr.net/npm/@inlang/plugin-standard-lint-rules@3/dist/index.js"
|
||||
);
|
||||
|
||||
return {
|
||||
referenceLanguage: "en",
|
||||
|
|
@ -20,8 +18,8 @@ export async function defineConfig(env) {
|
|||
// deactivating identical pattern because of nested
|
||||
// resources like "de-DE" and "de-AT" where "de-AT"
|
||||
// contrains overwrites but the majority are identical patterns.
|
||||
identicalPattern: "off"
|
||||
identicalPattern: "off",
|
||||
}),
|
||||
],
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import path from "path";
|
||||
import os from "os";
|
||||
import path from "path";
|
||||
|
||||
export const APP_STORE_PATH = path.join(__dirname, "..", "..", "app-store");
|
||||
export const TEMPLATES_PATH = path.join(APP_STORE_PATH, "templates");
|
||||
|
|
|
|||
|
|
@ -56,7 +56,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.cal-query-builder .rule--drag-handler,
|
||||
.cal-query-builder .rule--header {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@
|
|||
"logo": "icon.svg",
|
||||
"url": "https://skiff.com/blog/skiff-cal-com-launch",
|
||||
"variant": "calendar",
|
||||
"categories": [
|
||||
"calendar"
|
||||
],
|
||||
"categories": ["calendar"],
|
||||
"publisher": "Skiff World, Inc.",
|
||||
"email": "hello@skiff.org",
|
||||
"description": "End-to-end encrypted, private calendar, email, notes, and drive.",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Title } from '@calcom/storybook/components'
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import { Title } from "@calcom/storybook/components";
|
||||
import { Icon } from "@calcom/ui";
|
||||
import { Booker } from './Booker';
|
||||
|
||||
import { Booker } from "./Booker";
|
||||
|
||||
<Meta title="Atoms/Booker" component={Booker} />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,39 +1,37 @@
|
|||
|
||||
:root {
|
||||
/* background */
|
||||
|
||||
--cal-bg-emphasis: #E5E7EB;
|
||||
--cal-bg-emphasis: #e5e7eb;
|
||||
--cal-bg: white;
|
||||
--cal-bg-subtle: #F3F4F6;
|
||||
--cal-bg-muted: #F9FAFB;
|
||||
--cal-bg-subtle: #f3f4f6;
|
||||
--cal-bg-muted: #f9fafb;
|
||||
--cal-bg-inverted: #111827;
|
||||
|
||||
/* background -> components*/
|
||||
--cal-bg-info: #DEE9FC;
|
||||
--cal-bg-success: #E2FBE8;
|
||||
--cal-bg-attention: #FCEED8;
|
||||
--cal-bg-error: #F9E3E2;
|
||||
--cal-bg-info: #dee9fc;
|
||||
--cal-bg-success: #e2fbe8;
|
||||
--cal-bg-attention: #fceed8;
|
||||
--cal-bg-error: #f9e3e2;
|
||||
--cal-bg-dark-error: #752522;
|
||||
|
||||
|
||||
/* Borders */
|
||||
--cal-border-emphasis:#9CA3AF;
|
||||
--cal-border: #D1D5DB;
|
||||
--cal-border-subtle:#E5E7EB;
|
||||
--cal-border-muted:#F3F4F6;
|
||||
--cal-border-emphasis: #9ca3af;
|
||||
--cal-border: #d1d5db;
|
||||
--cal-border-subtle: #e5e7eb;
|
||||
--cal-border-muted: #f3f4f6;
|
||||
--cal-border-error: #aa2e26;
|
||||
|
||||
/* Content/Text */
|
||||
--cal-text-emphasis: #111827;
|
||||
--cal-text: #374151;
|
||||
--cal-text-subtle:#6B7280;
|
||||
--cal-text-muted:#9CA3AF;
|
||||
--cal-text-subtle: #6b7280;
|
||||
--cal-text-muted: #9ca3af;
|
||||
--cal-text-inverted: white;
|
||||
|
||||
/* Content/Text -> components */
|
||||
--cal-text-info: #253985;
|
||||
--cal-text-success: #285231;
|
||||
--cal-text-attention:#73321B;
|
||||
--cal-text-attention: #73321b;
|
||||
--cal-text-error: #752522;
|
||||
|
||||
/* Brand shenanigans
|
||||
|
|
@ -54,13 +52,12 @@
|
|||
--cal-bg-inverted: #f3f4f6;
|
||||
|
||||
/* background -> components*/
|
||||
--cal-bg-info: #DEE9FC;
|
||||
--cal-bg-success: #E2FBE8;
|
||||
--cal-bg-attention: #FCEED8;
|
||||
--cal-bg-error: #F9E3E2;
|
||||
--cal-bg-info: #dee9fc;
|
||||
--cal-bg-success: #e2fbe8;
|
||||
--cal-bg-attention: #fceed8;
|
||||
--cal-bg-error: #f9e3e2;
|
||||
--cal-bg-dark-error: #752522;
|
||||
|
||||
|
||||
/* Borders */
|
||||
--cal-border-emphasis: #575757;
|
||||
--cal-border: #444444;
|
||||
|
|
@ -78,7 +75,7 @@
|
|||
/* Content/Text -> components */
|
||||
--cal-text-info: #253985;
|
||||
--cal-text-success: #285231;
|
||||
--cal-text-attention:#73321B;
|
||||
--cal-text-attention: #73321b;
|
||||
--cal-text-error: #752522;
|
||||
|
||||
/* Brand shenanigans
|
||||
|
|
@ -87,4 +84,3 @@
|
|||
--cal-brand: #111827;
|
||||
--cal-brand-emphasis: #101010;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,4 +12,3 @@
|
|||
],
|
||||
"exclude": ["dist", "build", "node_modules"]
|
||||
}
|
||||
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
version: "3.6"
|
||||
services:
|
||||
mailhog:
|
||||
image: 'mailhog/mailhog:latest'
|
||||
image: "mailhog/mailhog:latest"
|
||||
ports:
|
||||
- "1025:1025"
|
||||
- "8025:8025"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@font-face {
|
||||
font-family: 'Cal Sans';
|
||||
font-family: "Cal Sans";
|
||||
src: url("https://cal.com/cal.ttf");
|
||||
}
|
||||
|
||||
|
|
@ -12,11 +12,14 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'Cal Sans';
|
||||
font-family: "Cal Sans";
|
||||
font-weight: normal;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
html, body, :host {
|
||||
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
|
||||
html,
|
||||
body,
|
||||
:host {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
|
||||
Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
}
|
||||
|
|
@ -1,11 +1,21 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
VariantsTable,
|
||||
VariantColumn,
|
||||
RowTitles,
|
||||
CustomArgsTable,
|
||||
} from "@calcom/storybook/components";
|
||||
import { Icon } from "@calcom/ui";
|
||||
|
||||
import { EventDetails } from './Details';
|
||||
import { EventTitle } from './Title';
|
||||
import { EventMembers } from './Members';
|
||||
import { mockEvent } from './event.mock.ts';
|
||||
import { EventDetails } from "./Details";
|
||||
import { EventMembers } from "./Members";
|
||||
import { EventTitle } from "./Title";
|
||||
import { mockEvent } from "./event.mock.ts";
|
||||
|
||||
<Meta title="Features/Events/Meta" component={EventDetails} />
|
||||
|
||||
|
|
@ -24,15 +34,15 @@ import { mockEvent } from './event.mock.ts';
|
|||
|
||||
<Canvas>
|
||||
<Story name="All variants">
|
||||
<VariantsTable titles={['Event Meta Components']} columnMinWidth={150}>
|
||||
<VariantsTable titles={["Event Meta Components"]} columnMinWidth={150}>
|
||||
<VariantRow variant="">
|
||||
<div style={{ maxWidth: 300 }}>
|
||||
<EventMembers users={
|
||||
[
|
||||
<EventMembers
|
||||
users={[
|
||||
{ name: "Pro example", username: "pro" },
|
||||
{name: "Team example", username: "team"}
|
||||
]
|
||||
} />
|
||||
{ name: "Team example", username: "team" },
|
||||
]}
|
||||
/>
|
||||
<EventTitle>Quick catch-up</EventTitle>
|
||||
<EventDetails event={mockEvent} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,8 @@ export const Template = (args) => <Calendar {...args} />;
|
|||
</Canvas>
|
||||
|
||||
<Canvas>
|
||||
<Story name="Onclick Handlers"
|
||||
<Story
|
||||
name="Onclick Handlers"
|
||||
args={{
|
||||
startHour: 8,
|
||||
endHour: 17,
|
||||
|
|
@ -71,10 +72,10 @@ export const Template = (args) => <Calendar {...args} />;
|
|||
hoverEventDuration: {
|
||||
control: { type: "number", min: 0, max: 60, step: 1 },
|
||||
},
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{({ ...args }) => (
|
||||
<Calendar {...args}
|
||||
<Calendar
|
||||
{...args}
|
||||
events={events}
|
||||
onEventClick={(e) => alert(e.title)}
|
||||
onEmptyCellClick={(date) => alert(date.toString())}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@
|
|||
|
||||
@media (min-width: 640px) {
|
||||
.scheduler-grid-row-template {
|
||||
grid-template-rows: var(--gridDefaultSize) repeat(attr(data-gridstoperperday number), var(--gridDefaultSize)) auto;
|
||||
grid-template-rows: var(--gridDefaultSize) repeat(
|
||||
attr(data-gridstoperperday number),
|
||||
var(--gridDefaultSize)
|
||||
) auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,38 +10,40 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.tremor-DateRangePicker-calendarButton, .tremor-DateRangePicker-dropdownButton {
|
||||
@apply border-subtle bg-default text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-0 focus-within:ring-emphasis hover:border-subtle dark:focus-within:ring-emphasis hover:bg-subtle
|
||||
.tremor-DateRangePicker-calendarButton,
|
||||
.tremor-DateRangePicker-dropdownButton {
|
||||
@apply border-subtle bg-default focus-within:ring-emphasis hover:border-subtle dark:focus-within:ring-emphasis hover:bg-subtle text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-0;
|
||||
}
|
||||
|
||||
.tremor-DateRangePicker-calendarButtonText,.tremor-DateRangePicker-dropdownButtonText {
|
||||
@apply text-default
|
||||
.tremor-DateRangePicker-calendarButtonText,
|
||||
.tremor-DateRangePicker-dropdownButtonText {
|
||||
@apply text-default;
|
||||
}
|
||||
|
||||
.tremor-DateRangePicker-calendarModal,.tremor-DateRangePicker-dropdownModal{
|
||||
@apply dark:invert
|
||||
.tremor-DateRangePicker-calendarModal,
|
||||
.tremor-DateRangePicker-dropdownModal {
|
||||
@apply dark:invert;
|
||||
}
|
||||
|
||||
.tremor-Card-root {
|
||||
@apply p-5
|
||||
@apply p-5;
|
||||
}
|
||||
|
||||
.tremor-TableCell-root {
|
||||
@apply pl-0
|
||||
@apply pl-0;
|
||||
}
|
||||
|
||||
.recharts-responsive-container {
|
||||
@apply -mx-4
|
||||
@apply -mx-4;
|
||||
}
|
||||
.tremor-Card-root > p {
|
||||
@apply text-base font-semibold mb-2
|
||||
@apply mb-2 text-base font-semibold;
|
||||
}
|
||||
|
||||
.tremor-Legend-legendItem {
|
||||
@apply ml-2
|
||||
@apply ml-2;
|
||||
}
|
||||
|
||||
.tremor-TableBody-root {
|
||||
@apply divide-subtle
|
||||
@apply divide-subtle;
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable } from '@calcom/storybook/components'
|
||||
import TokenHandler from './TokenHandler'
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import { Examples, Example, Note, Title, CustomArgsTable } from "@calcom/storybook/components";
|
||||
|
||||
import TokenHandler from "./TokenHandler";
|
||||
|
||||
<Meta title="UI/TokenHandler" component={TokenHandler} />
|
||||
|
||||
|
|
@ -8,7 +10,8 @@ import TokenHandler from './TokenHandler'
|
|||
|
||||
## Structure
|
||||
|
||||
<TokenHandler digits={[
|
||||
<TokenHandler
|
||||
digits={[
|
||||
{
|
||||
value: "1",
|
||||
onChange: (e) => {},
|
||||
|
|
@ -33,6 +36,8 @@ import TokenHandler from './TokenHandler'
|
|||
value: "6",
|
||||
onChange: (e) => {},
|
||||
},
|
||||
]} digitClassName="digit-input" />
|
||||
]}
|
||||
digitClassName="digit-input"
|
||||
/>
|
||||
|
||||
#all the numbers should be visible while the first one is focused
|
||||
|
|
|
|||
|
|
@ -1,32 +1,56 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title, CustomArgsTable, VariantsTable,VariantRow } from '@calcom/storybook/components'
|
||||
import { Alert } from './Alert';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { Alert } from "./Alert";
|
||||
|
||||
<Meta title="UI/Alert" component={Alert} />
|
||||
|
||||
<Title title="Alert" suffix="Brief" subtitle="Version 2.0 — Last Update: 04 jan 2023" />
|
||||
|
||||
## Definition
|
||||
|
||||
Alerts provide time-based feedback to the user after taking an action.
|
||||
|
||||
## Structure
|
||||
|
||||
Each alert has a state to represent neutral, positive or negative responses.
|
||||
|
||||
<CustomArgsTable of={Alert} />
|
||||
|
||||
<Examples title="Alert style">
|
||||
<Example title="Error">
|
||||
<Alert severity="error" title="Summarise what happened" message="Describe what can be done about it here." />
|
||||
<Alert
|
||||
severity="error"
|
||||
title="Summarise what happened"
|
||||
message="Describe what can be done about it here."
|
||||
/>
|
||||
</Example>
|
||||
<Example title="Warning">
|
||||
<Alert severity="warning" title="Summarise what happened" message="Describe what can be done about it here." />
|
||||
<Alert
|
||||
severity="warning"
|
||||
title="Summarise what happened"
|
||||
message="Describe what can be done about it here."
|
||||
/>
|
||||
</Example>
|
||||
<Example title="With actions">
|
||||
<Alert
|
||||
severity="warning"
|
||||
title="Summarise what happened"
|
||||
message="Describe what can be done about it here."
|
||||
actions={<><button>Cancel me</button></>}
|
||||
actions={
|
||||
<>
|
||||
<button>Cancel me</button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</Example>
|
||||
</Examples>
|
||||
|
|
@ -37,31 +61,30 @@ Each alert has a state to represent neutral, positive or negative responses.
|
|||
<Story
|
||||
name="Alert"
|
||||
args={{
|
||||
severity: 'success',
|
||||
title: 'Summarise what happened',
|
||||
message: 'Describe what can be done about it here.',
|
||||
severity: "success",
|
||||
title: "Summarise what happened",
|
||||
message: "Describe what can be done about it here.",
|
||||
}}
|
||||
argTypes={{
|
||||
severity: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['success', 'warning', 'error', 'neutral', 'info'],
|
||||
type: "inline-radio",
|
||||
options: ["success", "warning", "error", "neutral", "info"],
|
||||
},
|
||||
},
|
||||
title: {
|
||||
control: {
|
||||
type: 'text'
|
||||
}
|
||||
type: "text",
|
||||
},
|
||||
},
|
||||
message: {
|
||||
control: {
|
||||
type: 'text'
|
||||
}
|
||||
type: "text",
|
||||
},
|
||||
}}
|
||||
>
|
||||
},
|
||||
}}>
|
||||
{({ severity, title, message }) => (
|
||||
<VariantsTable titles={['Default']} columnMinWidth={150}>
|
||||
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
||||
<VariantRow variant={severity}>
|
||||
<Alert severity={severity} title={title} message={message} />
|
||||
</VariantRow>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title, CustomArgsTable, VariantsTable, VariantRow } from '@calcom/storybook/components';
|
||||
import { AppStoreCategories as Categories } from './Categories';
|
||||
import { _SBAppCategoryList } from './_storybookData';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { AppStoreCategories as Categories } from "./Categories";
|
||||
import { _SBAppCategoryList } from "./_storybookData";
|
||||
|
||||
<Meta title="UI/apps/Categories" component={Categories} />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,28 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
||||
import {Avatar} from './Avatar';
|
||||
import {AvatarGroup} from './AvatarGroup';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { Avatar } from "./Avatar";
|
||||
import { AvatarGroup } from "./AvatarGroup";
|
||||
|
||||
<Meta title="UI/Avatar" component={Avatar} />
|
||||
|
||||
<Title title="Avatar" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||
|
||||
|
||||
|
||||
## Definition
|
||||
|
||||
An avatar group signals that there is more than 1 person associated with an item
|
||||
|
||||
## Structure
|
||||
|
||||
Avatar group can be composed differently based on the number of user profile.
|
||||
|
||||
<CustomArgsTable of={Avatar} />
|
||||
|
|
@ -29,10 +39,13 @@ Avatar group can be composed differently based on the number of user profile.
|
|||
<ArgsTable of={Avatar} />
|
||||
|
||||
### Avatar Group
|
||||
|
||||
<ArgsTable of={AvatarGroup} />
|
||||
<Examples title="Avatar Group ">
|
||||
<Example title="Small">
|
||||
<AvatarGroup size="sm" items={[
|
||||
<AvatarGroup
|
||||
size="sm"
|
||||
items={[
|
||||
{
|
||||
image: "https://cal.com/stakeholder/peer.jpg",
|
||||
alt: "Peer",
|
||||
|
|
@ -73,10 +86,13 @@ Avatar group can be composed differently based on the number of user profile.
|
|||
alt: "Ciarán",
|
||||
title: "Ciarán Hanrahan",
|
||||
},
|
||||
]}/>
|
||||
]}
|
||||
/>
|
||||
</Example>
|
||||
<Example title="large">
|
||||
<AvatarGroup size="lg" items={[
|
||||
<AvatarGroup
|
||||
size="lg"
|
||||
items={[
|
||||
{
|
||||
image: "https://cal.com/stakeholder/peer.jpg",
|
||||
alt: "Peer",
|
||||
|
|
@ -117,7 +133,8 @@ Avatar group can be composed differently based on the number of user profile.
|
|||
alt: "Ciarán",
|
||||
title: "Ciarán Hanrahan",
|
||||
},
|
||||
]}/>
|
||||
]}
|
||||
/>
|
||||
</Example>
|
||||
</Examples>
|
||||
|
||||
|
|
@ -127,23 +144,22 @@ Avatar group can be composed differently based on the number of user profile.
|
|||
<Story
|
||||
name="Avatar"
|
||||
args={{
|
||||
size: 'sm',
|
||||
alt: 'Avatar Story',
|
||||
gravatarFallbackMd5: 'Ui@CAL.com',
|
||||
size: "sm",
|
||||
alt: "Avatar Story",
|
||||
gravatarFallbackMd5: "Ui@CAL.com",
|
||||
}}
|
||||
argTypes={{
|
||||
size: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['sm', 'lg'],
|
||||
type: "inline-radio",
|
||||
options: ["sm", "lg"],
|
||||
},
|
||||
},
|
||||
alt: { control: 'text' },
|
||||
gravatarFallbackMd5: { control: 'text' },
|
||||
}}
|
||||
>
|
||||
alt: { control: "text" },
|
||||
gravatarFallbackMd5: { control: "text" },
|
||||
}}>
|
||||
{({ size, alt, gravatarFallbackMd5 }) => (
|
||||
<VariantsTable titles={['Default']} columnMinWidth={150}>
|
||||
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
||||
<VariantRow variant={size}>
|
||||
<Avatar size={size} alt={alt} gravatarFallbackMd5={gravatarFallbackMd5} />
|
||||
</VariantRow>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,32 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
|
||||
import { Plus } from '../icon';
|
||||
import { Badge } from './Badge';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { Plus } from "../icon";
|
||||
import { Badge } from "./Badge";
|
||||
|
||||
<Meta title="UI/Badge" component={Badge} />
|
||||
|
||||
<Title title="Bages" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||
|
||||
|
||||
## Definition
|
||||
|
||||
Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object. We provide three different type of badge such as status, alert, and brand badge.
|
||||
|
||||
Status badge communicate status information. It is generally used within a container such as accordion and tables to label status for easy scanning.
|
||||
|
||||
## Structure
|
||||
|
||||
<CustomArgsTable of={Badge} />
|
||||
|
||||
|
||||
<Examples title="Badge style">
|
||||
<Example title="Gray">
|
||||
<Badge variant="gray">Badge text</Badge>
|
||||
|
|
@ -44,42 +54,44 @@ Status badge communicate status information. It is generally used within a cont
|
|||
</Example>
|
||||
</Examples>
|
||||
|
||||
|
||||
## Alert Badges
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Alet badge is used in conjunction with an item, profile or label to indicate numeric value and messages assocciated with them.
|
||||
|
||||
|
||||
|
||||
<Title offset title="Badge" suffix="Variants" />
|
||||
|
||||
<Canvas>
|
||||
<Story name="All Variants"
|
||||
<Story
|
||||
name="All Variants"
|
||||
args={{
|
||||
severity: 'default',
|
||||
label: 'Badge text',
|
||||
severity: "default",
|
||||
label: "Badge text",
|
||||
}}
|
||||
argTypes={{
|
||||
severity: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['default', 'success', 'gray', 'error'],
|
||||
type: "inline-radio",
|
||||
options: ["default", "success", "gray", "error"],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
control: {
|
||||
type: 'text',
|
||||
type: "text",
|
||||
},
|
||||
},
|
||||
}}>
|
||||
{({ severity, label }) => (
|
||||
<VariantsTable titles={['Default','With Dot', 'With Icon']} columnMinWidth={150}>
|
||||
<VariantsTable titles={["Default", "With Dot", "With Icon"]} columnMinWidth={150}>
|
||||
<VariantRow variant={severity}>
|
||||
<Badge variant={severity}>{label}</Badge>
|
||||
<Badge variant={severity} withDot>{label}</Badge>
|
||||
<Badge variant={severity} startIcon={Plus}>{label}</Badge>
|
||||
<Badge variant={severity} withDot>
|
||||
{label}
|
||||
</Badge>
|
||||
<Badge variant={severity} startIcon={Plus}>
|
||||
{label}
|
||||
</Badge>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable } from '@calcom/storybook/components'
|
||||
import { Breadcrumb } from './Breadcrumb';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import { Examples, Example, Note, Title, CustomArgsTable } from "@calcom/storybook/components";
|
||||
|
||||
import { Breadcrumb } from "./Breadcrumb";
|
||||
|
||||
<Meta title="UI/Breadcrumbs" component={Breadcrumb} />
|
||||
|
||||
<Title title="Breadcrumbs" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||
|
||||
|
||||
## Structure
|
||||
|
||||
<CustomArgsTable of={Breadcrumb} />
|
||||
|
||||
|
||||
<Examples title="Breadcrumb style"
|
||||
>
|
||||
<Examples title="Breadcrumb style">
|
||||
<Example title="Primary">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
||||
|
|
@ -23,4 +22,5 @@ import { Breadcrumb } from './Breadcrumb';
|
|||
</Examples>
|
||||
|
||||
## Usage
|
||||
|
||||
When hovering over the button, there should be a tooltip to explain the context of the button, so the user can understand the result of action.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
|
|
@ -8,25 +9,27 @@ import {
|
|||
VariantColumn,
|
||||
RowTitles,
|
||||
CustomArgsTable,
|
||||
VariantRow
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
import { Plus, X } from '../icon';
|
||||
import { Button } from './Button';
|
||||
|
||||
import { Plus, X } from "../icon";
|
||||
import { Button } from "./Button";
|
||||
|
||||
<Meta title="UI/Button" component={Button} />
|
||||
|
||||
<Title title="Buttons" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||
|
||||
|
||||
## Definition
|
||||
|
||||
Button are clickable elements that initiates user actions. Labels in the button guide users to what action will occur when the user interacts with it.
|
||||
|
||||
## Structure
|
||||
|
||||
<CustomArgsTable of={Button} />
|
||||
|
||||
|
||||
<Examples title="Button style" footnote={
|
||||
<Examples
|
||||
title="Button style"
|
||||
footnote={
|
||||
<ul>
|
||||
<li>Primary: Signals most important actions at any given point in the application.</li>
|
||||
<li>Secondary: Gives visual weight to actions that are important</li>
|
||||
|
|
@ -87,19 +90,23 @@ Button are clickable elements that initiates user actions. Labels in the button
|
|||
</Examples>
|
||||
|
||||
## Anatomy
|
||||
|
||||
Button are clickable elements that initiates user actions. Labels in the button guide users to what action will occur when the user interacts with it.
|
||||
|
||||
## Usage
|
||||
|
||||
<Note>In general, there should be only one Primary button in any application context</Note>
|
||||
<Note>Aim to use maximum 2 words for the button label. Button size can be flexible based on the visual hierarchy and devices. </Note>
|
||||
<Note>
|
||||
Aim to use maximum 2 words for the button label. Button size can be flexible based on the visual hierarchy
|
||||
and devices.{" "}
|
||||
</Note>
|
||||
<Note>Hover state variant for Mobile button is an option for assistive device.</Note>
|
||||
|
||||
<Title offset title="Buttons" suffix="Variants" />
|
||||
|
||||
<Canvas>
|
||||
<Story name="All variants">
|
||||
<VariantsTable titles={['Primary', 'Secondary', 'Minimal', 'Destructive',"Icon"]} columnMinWidth={150}>
|
||||
<VariantsTable titles={["Primary", "Secondary", "Minimal", "Destructive", "Icon"]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<Button>Button text</Button>
|
||||
<Button color="secondary">Button text</Button>
|
||||
|
|
@ -109,79 +116,103 @@ Button are clickable elements that initiates user actions. Labels in the button
|
|||
</VariantRow>
|
||||
<VariantRow variant="Hover">
|
||||
<Button className="sb-pseudo--hover">Button text</Button>
|
||||
<Button className="sb-pseudo--hover" color="secondary">Button text</Button>
|
||||
<Button className="sb-pseudo--hover" color="minimal">Button text</Button>
|
||||
<Button className="sb-pseudo--hover" color="destructive">Button text</Button>
|
||||
<Button className="sb-pseudo--hover" color="secondary">
|
||||
Button text
|
||||
</Button>
|
||||
<Button className="sb-pseudo--hover" color="minimal">
|
||||
Button text
|
||||
</Button>
|
||||
<Button className="sb-pseudo--hover" color="destructive">
|
||||
Button text
|
||||
</Button>
|
||||
<Button className="sb-pseudo--hover" color="destructive" variant="icon" StartIcon={X}></Button>
|
||||
</VariantRow>
|
||||
<VariantRow variant="Focus">
|
||||
<Button className="sb-pseudo--focus">Button text</Button>
|
||||
<Button className="sb-pseudo--focus" color="secondary">Button text</Button>
|
||||
<Button className="sb-pseudo--focus" color="minimal">Button text</Button>
|
||||
<Button className="sb-pseudo--focus" color="destructive">Button text</Button>
|
||||
<Button className="sb-pseudo--focus" color="secondary">
|
||||
Button text
|
||||
</Button>
|
||||
<Button className="sb-pseudo--focus" color="minimal">
|
||||
Button text
|
||||
</Button>
|
||||
<Button className="sb-pseudo--focus" color="destructive">
|
||||
Button text
|
||||
</Button>
|
||||
<Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon={X}></Button>
|
||||
</VariantRow>
|
||||
<VariantRow variant="Loading">
|
||||
<Button loading>Button text</Button>
|
||||
<Button loading color="secondary">Button text</Button>
|
||||
<Button loading color="minimal">Button text</Button>
|
||||
<Button loading color="destructive">Button text</Button>
|
||||
<Button loading color="secondary">
|
||||
Button text
|
||||
</Button>
|
||||
<Button loading color="minimal">
|
||||
Button text
|
||||
</Button>
|
||||
<Button loading color="destructive">
|
||||
Button text
|
||||
</Button>
|
||||
<Button loading color="destructive" variant="icon" StartIcon={X}></Button>
|
||||
</VariantRow>
|
||||
<VariantRow variant="Disabled">
|
||||
<Button disabled>Button text</Button>
|
||||
<Button disabled color="secondary">Button text</Button>
|
||||
<Button disabled color="minimal">Button text</Button>
|
||||
<Button disabled color="destructive">Button text</Button>
|
||||
<Button disabled color="secondary">
|
||||
Button text
|
||||
</Button>
|
||||
<Button disabled color="minimal">
|
||||
Button text
|
||||
</Button>
|
||||
<Button disabled color="destructive">
|
||||
Button text
|
||||
</Button>
|
||||
<Button disabled color="minimal" variant="icon" StartIcon={X}></Button>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
</Story>
|
||||
<Story name="Button Playground"
|
||||
<Story
|
||||
name="Button Playground"
|
||||
args={{
|
||||
color: 'primary',
|
||||
size: 'base',
|
||||
color: "primary",
|
||||
size: "base",
|
||||
loading: false,
|
||||
disabled: false,
|
||||
children: 'Button text',
|
||||
className: ''
|
||||
children: "Button text",
|
||||
className: "",
|
||||
}}
|
||||
argTypes={{
|
||||
color: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['primary', 'secondary', 'minimal', 'destructive']
|
||||
}
|
||||
type: "inline-radio",
|
||||
options: ["primary", "secondary", "minimal", "destructive"],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['base', 'sm']
|
||||
}
|
||||
type: "inline-radio",
|
||||
options: ["base", "sm"],
|
||||
},
|
||||
},
|
||||
loading: {
|
||||
control: {
|
||||
type: 'boolean'
|
||||
}
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
disabled: {
|
||||
control: {
|
||||
type: 'boolean'
|
||||
}
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
children: {
|
||||
control: {
|
||||
type: 'text'
|
||||
}
|
||||
type: "text",
|
||||
},
|
||||
},
|
||||
className: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['', 'sb-pseudo--hover', 'sb-pseudo--focus']
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
type: "inline-radio",
|
||||
options: ["", "sb-pseudo--hover", "sb-pseudo--focus"],
|
||||
},
|
||||
},
|
||||
}}>
|
||||
{({ color, size, loading, disabled, children, className }) => (
|
||||
<VariantsTable titles={["Light & Dark Modes"]} columnMinWidth={150}>
|
||||
<VariantRow variant="Button">
|
||||
|
|
@ -191,8 +222,7 @@ Button are clickable elements that initiates user actions. Labels in the button
|
|||
variant="default"
|
||||
loading={loading}
|
||||
disabled={disabled}
|
||||
className={className}
|
||||
>
|
||||
className={className}>
|
||||
{children}
|
||||
</Button>
|
||||
</VariantRow>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,42 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
||||
import { Trash, Navigation, Clipboard } from '../icon';
|
||||
import { ButtonGroup} from './ButtonGroup';
|
||||
import { Button} from '../button/Button';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { Button } from "../button/Button";
|
||||
import { Trash, Navigation, Clipboard } from "../icon";
|
||||
import { ButtonGroup } from "./ButtonGroup";
|
||||
|
||||
<Meta title="UI/Button Group" component={ButtonGroup} />
|
||||
|
||||
<Title title="Button Group" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||
|
||||
## Definition
|
||||
|
||||
Button group enables multiple buttons to be combined into a single unit. It offers users access to frequently performed, related actions.
|
||||
|
||||
## Structure
|
||||
|
||||
<CustomArgsTable of={ButtonGroup} />
|
||||
|
||||
|
||||
<Examples title="Breadcrumb style"
|
||||
<Examples
|
||||
title="Breadcrumb style"
|
||||
footNote={
|
||||
<ul>
|
||||
<li>
|
||||
Seperated: In general, seperated button group style can be included in container such as card, modal, and page.
|
||||
</li>
|
||||
<li>
|
||||
Combined: Combined button group can be used standalone e.g. mini toggles for calendars
|
||||
Seperated: In general, seperated button group style can be included in container such as card, modal,
|
||||
and page.
|
||||
</li>
|
||||
<li>Combined: Combined button group can be used standalone e.g. mini toggles for calendars</li>
|
||||
</ul>
|
||||
}
|
||||
>
|
||||
}>
|
||||
<Example title="Default">
|
||||
<ButtonGroup>
|
||||
<Button StartIcon={Trash} variant="icon" color="secondary" />
|
||||
|
|
@ -44,11 +53,9 @@ Button group enables multiple buttons to be combined into a single unit. It offe
|
|||
</Example>
|
||||
</Examples>
|
||||
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="All Variants">
|
||||
<VariantsTable titles={["Default",'Secondary',"Minimal"]} columnMinWidth={150}>
|
||||
<Story name="All Variants">
|
||||
<VariantsTable titles={["Default", "Secondary", "Minimal"]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<ButtonGroup>
|
||||
<Button StartIcon={Trash} variant="icon" />
|
||||
|
|
@ -86,23 +93,22 @@ Button group enables multiple buttons to be combined into a single unit. It offe
|
|||
<Story
|
||||
name="ButtonGroup Playground"
|
||||
args={{
|
||||
color: 'secondary',
|
||||
color: "secondary",
|
||||
combined: false,
|
||||
}}
|
||||
argTypes={{
|
||||
color: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['primary', 'secondary', 'minimal'],
|
||||
type: "select",
|
||||
options: ["primary", "secondary", "minimal"],
|
||||
},
|
||||
},
|
||||
combined: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{({ color, combined }) => (
|
||||
<VariantsTable titles={[`${color}`]} columnMinWidth={150}>
|
||||
<VariantRow variant="">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,23 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
||||
import Card from './Card';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import Card from "./Card";
|
||||
|
||||
<Meta title="UI/Card" component={Card} />
|
||||
|
||||
<Title title="Card" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
|
||||
|
||||
## Definition
|
||||
|
||||
All Cards used in Cal.com
|
||||
|
||||
<CustomArgsTable of={Card} />
|
||||
|
|
@ -18,11 +29,11 @@ export const tip = {
|
|||
title: "Dynamic booking links",
|
||||
description: "Booking link that allows people to quickly schedule meetings.",
|
||||
href: "https://cal.com/blog/cal-v-1-9",
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
<Canvas>
|
||||
<Story name="Card"
|
||||
<Story
|
||||
name="Card"
|
||||
args={{
|
||||
thumbnailUrl: tip.thumbnailUrl,
|
||||
mediaLink: tip.mediaLink,
|
||||
|
|
@ -32,15 +43,15 @@ export const tip = {
|
|||
learnMoreText: "learn more",
|
||||
}}
|
||||
argTypes={{
|
||||
thumbnailUrl: { control: { type: 'text' } },
|
||||
mediaLink: { control: { type: 'text' } },
|
||||
title: { control: { type: 'text' } },
|
||||
description: { control: { type: 'text' } },
|
||||
learnMoreHref: { control: { type: 'text' } },
|
||||
learnMoreText: { control: { type: 'text' } },
|
||||
thumbnailUrl: { control: { type: "text" } },
|
||||
mediaLink: { control: { type: "text" } },
|
||||
title: { control: { type: "text" } },
|
||||
description: { control: { type: "text" } },
|
||||
learnMoreHref: { control: { type: "text" } },
|
||||
learnMoreText: { control: { type: "text" } },
|
||||
}}>
|
||||
{({ thumbnailUrl, mediaLink, title, description, learnMoreText }) => (
|
||||
<VariantsTable titles={['']} columnMinWidth={150}>
|
||||
<VariantsTable titles={[""]} columnMinWidth={150}>
|
||||
<VariantRow variant="Sidebar Card">
|
||||
<Card
|
||||
variant="SidebarCard"
|
||||
|
|
|
|||
|
|
@ -1,17 +1,27 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
||||
import Credits from './Credits';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import Credits from "./Credits";
|
||||
|
||||
<Meta title="UI/Credits" component={Credits} />
|
||||
|
||||
<Title title="Credits" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
|
||||
|
||||
## Definition
|
||||
|
||||
Shows the current copy right as well as app version name.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Credits">
|
||||
<Story name="Credits">
|
||||
<VariantsTable titles={[]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<Credits />
|
||||
|
|
|
|||
|
|
@ -22,6 +22,12 @@ import { dataTableDemousers,dataTableSelectionActions } from "./data";
|
|||
|
||||
<Canvas>
|
||||
<Story name="Datatable">
|
||||
<DataTable columns={columns} data={dataTableDemousers} filterableItems={filterableItems} searchKey="username" selectionOptions={dataTableSelectionActions} />
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={dataTableDemousers}
|
||||
filterableItems={filterableItems}
|
||||
searchKey="username"
|
||||
selectionOptions={dataTableSelectionActions}
|
||||
/>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,27 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
||||
import {Divider, VerticalDivider} from './Divider';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { Divider, VerticalDivider } from "./Divider";
|
||||
|
||||
<Meta title="UI/Divider" component={Divider} />
|
||||
|
||||
<Title title="Divider" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
|
||||
|
||||
## Definition
|
||||
|
||||
Shows the current copy right as well as app version name.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Divider">
|
||||
<Story name="Divider">
|
||||
<VariantsTable titles={[]} columnMinWidth={150}>
|
||||
<VariantRow variant="Horizontal">
|
||||
<div className="dark:text-inverted">
|
||||
|
|
@ -21,7 +31,7 @@ Shows the current copy right as well as app version name.
|
|||
</div>
|
||||
</VariantRow>
|
||||
<VariantRow variant="Vertical">
|
||||
<div className="flex dark:text-inverted">
|
||||
<div className="dark:text-inverted flex">
|
||||
Text left
|
||||
<VerticalDivider />
|
||||
Text right
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
.editor a {
|
||||
text-decoration: underline;
|
||||
font-size: 14px;
|
||||
|
|
@ -10,11 +9,11 @@
|
|||
}
|
||||
|
||||
.editor ul {
|
||||
list-style: disc inside
|
||||
list-style: disc inside;
|
||||
}
|
||||
|
||||
.editor ol {
|
||||
list-style: decimal inside
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
|
|
@ -46,7 +45,7 @@
|
|||
tab-size: 1;
|
||||
outline: 0;
|
||||
padding: 10px 10px;
|
||||
outline: none
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.editor-text-bold {
|
||||
|
|
@ -69,7 +68,7 @@
|
|||
.editor-paragraph {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
color: var(--cal-text)
|
||||
color: var(--cal-text);
|
||||
}
|
||||
|
||||
.editor-paragraph:last-child {
|
||||
|
|
@ -83,7 +82,6 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.editor-heading-h2 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
|
|
@ -98,7 +96,6 @@
|
|||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
||||
.editor-listitem {
|
||||
margin: 0px 32px;
|
||||
}
|
||||
|
|
@ -144,7 +141,7 @@ pre::-webkit-scrollbar-thumb {
|
|||
|
||||
.toolbar button.toolbar-item.active {
|
||||
background-color: var(--cal-bg-inverted);
|
||||
color: var(--cal-text-inverted)
|
||||
color: var(--cal-text-inverted);
|
||||
}
|
||||
|
||||
.toolbar button.toolbar-item.active i {
|
||||
|
|
@ -353,7 +350,8 @@ pre::-webkit-scrollbar-thumb {
|
|||
vertical-align: -0.25em;
|
||||
}
|
||||
|
||||
i, .icon {
|
||||
i,
|
||||
.icon {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,24 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { Calendar } from "../icon";
|
||||
import { EmptyScreen } from './EmptyScreen';
|
||||
import { EmptyScreen } from "./EmptyScreen";
|
||||
|
||||
<Meta title="UI/EmptyScreen" component={EmptyScreen} />
|
||||
|
||||
<Title title="EmptyScreen" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
|
||||
|
||||
## Definition
|
||||
|
||||
An empty state is where no info/ apps are added to a page with typically content. There must be a text that prompts users to learn more about why they see this state if necessary.
|
||||
The CTA button can prompt the user to add the info/ apps needed for the page.
|
||||
|
||||
|
|
@ -15,22 +26,22 @@ The CTA button can prompt the user to add the info/ apps needed for the page.
|
|||
<Story
|
||||
name="EmptyScreen"
|
||||
args={{
|
||||
headline: 'Empty state header',
|
||||
description: 'Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo.',
|
||||
buttonText: 'Learn More',
|
||||
headline: "Empty state header",
|
||||
description:
|
||||
"Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo.",
|
||||
buttonText: "Learn More",
|
||||
}}
|
||||
argTypes={{
|
||||
headline: {
|
||||
control: 'text',
|
||||
control: "text",
|
||||
},
|
||||
description: {
|
||||
control: 'text',
|
||||
control: "text",
|
||||
},
|
||||
buttonText: {
|
||||
control: 'text',
|
||||
control: "text",
|
||||
},
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{({ headline, description, buttonText }) => (
|
||||
<VariantsTable titles={[]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
|
|
|
|||
|
|
@ -1,19 +1,29 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
||||
import {CheckboxField as Checkbox} from './Checkbox';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { CheckboxField as Checkbox } from "./Checkbox";
|
||||
|
||||
<Meta title="UI/Form/Checkbox" component={Checkbox} />
|
||||
|
||||
<Title title="Checkbox " suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||
|
||||
## Definition
|
||||
|
||||
Checkboxes are used in forms and databases to indicate an answer to a question, apply a batch of settings or allow the user to make a multi-selection from a list. Alternatively, a single checkbox may be used for making single selections
|
||||
|
||||
## Structure
|
||||
|
||||
<CustomArgsTable of={Checkbox} />
|
||||
|
||||
|
||||
<Examples title="Checkbox style">
|
||||
<Example title="Default">
|
||||
<Checkbox label="Default" />
|
||||
|
|
@ -45,7 +55,8 @@ Checkboxes are used in forms and databases to indicate an answer to a question,
|
|||
</Examples>
|
||||
|
||||
<Canvas>
|
||||
<Story name="Checkbox"
|
||||
<Story
|
||||
name="Checkbox"
|
||||
args={{
|
||||
label: "Default",
|
||||
description: "Default Description",
|
||||
|
|
@ -55,26 +66,25 @@ Checkboxes are used in forms and databases to indicate an answer to a question,
|
|||
argTypes={{
|
||||
label: {
|
||||
control: {
|
||||
type: 'text',
|
||||
type: "text",
|
||||
},
|
||||
},
|
||||
description: {
|
||||
control: {
|
||||
type: 'text',
|
||||
type: "text",
|
||||
},
|
||||
},
|
||||
error: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
disabled: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
type: "boolean",
|
||||
},
|
||||
}
|
||||
}}
|
||||
>
|
||||
},
|
||||
}}>
|
||||
{({ label, description, error, disabled }) => (
|
||||
<VariantsTable titles={[""]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
|
|
|
|||
|
|
@ -1,22 +1,34 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable, VariantRow,VariantsTable} from '@calcom/storybook/components'
|
||||
import { Select, UnstyledSelect } from "../select";
|
||||
import { InputFieldWithSelect } from './Input';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {InputField} from "./Input"
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantRow,
|
||||
VariantsTable,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { Select, UnstyledSelect } from "../select";
|
||||
import { InputFieldWithSelect } from "./Input";
|
||||
import { InputField } from "./Input";
|
||||
|
||||
<Meta title="UI/Form/Input Field" component={InputField} />
|
||||
|
||||
<Title title="Inputs" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||
|
||||
## Definition
|
||||
|
||||
Text fields allow users to input and edit text into the product. Usually appear in forms and modals. Various options can be shown with the field to communicate the input requirements.## Structure
|
||||
|
||||
## Structure
|
||||
|
||||
<CustomArgsTable of={InputField} />
|
||||
|
||||
|
||||
<Examples title="Inputs" footnote={
|
||||
<Examples
|
||||
title="Inputs"
|
||||
footnote={
|
||||
<ul>
|
||||
<li>The width is flexible but the height is fixed for both desktop and mobile. </li>
|
||||
</ul>
|
||||
|
|
@ -37,7 +49,10 @@ Text fields allow users to input and edit text into the product. Usually appear
|
|||
<InputField placeholder="Suffic" addOnSuffix={<>Suffix</>} />
|
||||
</Example>
|
||||
<Example title="Suffix With Select">
|
||||
<InputFieldWithSelect placeholder="Suffix" selectProps={{options:[{value:"TEXT",label:"Text"}]}}/>
|
||||
<InputFieldWithSelect
|
||||
placeholder="Suffix"
|
||||
selectProps={{ options: [{ value: "TEXT", label: "Text" }] }}
|
||||
/>
|
||||
</Example>
|
||||
<Example title="Focused">
|
||||
<InputField placeholder="Focused" className="sb-pseudo--focus" />
|
||||
|
|
@ -66,7 +81,7 @@ Text fields allow users to input and edit text into the product. Usually appear
|
|||
|
||||
<Canvas>
|
||||
<Story name="All Variants">
|
||||
<VariantsTable titles={['Default','Focused', 'Hovered']} columnMinWidth={150}>
|
||||
<VariantsTable titles={["Default", "Focused", "Hovered"]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<InputField placeholder="Default" />
|
||||
<InputField placeholder="Focused" className="sb-pseudo--focus" />
|
||||
|
|
|
|||
|
|
@ -1,21 +1,30 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable, VariantRow,VariantsTable} from '@calcom/storybook/components'
|
||||
import { Plus } from "../../icon";
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import { SelectField } from "./Select"
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantRow,
|
||||
VariantsTable,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { Plus } from "../../icon";
|
||||
import { SelectField } from "./Select";
|
||||
|
||||
<Meta title="UI/Form/Select Field" component={SelectField} />
|
||||
|
||||
<Title title="Select" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||
|
||||
## Definition
|
||||
|
||||
Dropdown fields allow users to input existing options that is preset by the deisgner/ developer. It can be just one choice per field, or they might be multiple choices depends on the circumstances.
|
||||
|
||||
## Structure
|
||||
|
||||
<CustomArgsTable of={SelectField} />
|
||||
|
||||
|
||||
|
||||
export const options = [
|
||||
{ value: 0, label: "Option One" },
|
||||
{ value: 1, label: "Option Two" },
|
||||
|
|
@ -23,49 +32,32 @@ export const options = [
|
|||
{ value: 4, label: "Option Four" },
|
||||
];
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
<Examples title=" Single Selected / Unselected" footnote={
|
||||
<Examples
|
||||
title=" Single Selected / Unselected"
|
||||
footnote={
|
||||
<ul>
|
||||
<li>The difference between the types are when they are filled. </li>
|
||||
</ul>
|
||||
}>
|
||||
<Example title="Single Select [Unselected]" isFullWidth>
|
||||
<SelectField
|
||||
label={"Single Select"}
|
||||
options={options}
|
||||
/>
|
||||
<SelectField label={"Single Select"} options={options} />
|
||||
</Example>
|
||||
<Example title="Single Select [Selected]" isFullWidth>
|
||||
<SelectField
|
||||
label={"Single Select"}
|
||||
options={options}
|
||||
defaultValue={options[0]}
|
||||
/>
|
||||
<SelectField label={"Single Select"} options={options} defaultValue={options[0]} />
|
||||
</Example>
|
||||
<Example title="Multi Select [Unselected]" isFullWidth>
|
||||
<SelectField
|
||||
label={"Multi Select"}
|
||||
options={options}
|
||||
isMulti={true}
|
||||
/>
|
||||
<SelectField label={"Multi Select"} options={options} isMulti={true} />
|
||||
</Example>
|
||||
<Example title="Multi Select [Selected]" isFullWidth>
|
||||
<SelectField
|
||||
label={"Multi Select"}
|
||||
options={options}
|
||||
isMulti={true}
|
||||
defaultValue={options[0]}
|
||||
/>
|
||||
<SelectField label={"Multi Select"} options={options} isMulti={true} defaultValue={options[0]} />
|
||||
</Example>
|
||||
</Examples>
|
||||
|
||||
<Examples title="Variants">
|
||||
<Example title="Default">
|
||||
<SelectField
|
||||
label={"Default Select"}
|
||||
options={options}/>
|
||||
<SelectField label={"Default Select"} options={options} />
|
||||
</Example>
|
||||
<Example title="Icon Left">
|
||||
WIP
|
||||
|
|
@ -73,27 +65,25 @@ export const options = [
|
|||
</Example>
|
||||
</Examples>
|
||||
|
||||
|
||||
## Variant Caviats (WIP) - To be updated
|
||||
|
||||
Using Icons is a bit of a strange one cause you can't simpily pass in an icon as a prop. You have to pass in a component. To the select field.
|
||||
|
||||
```js
|
||||
// Bad: Inline declaration will cause remounting issues
|
||||
const BadSelect = props => (
|
||||
<Select {...props} components={{
|
||||
Control: ({ children, ...rest }) => (
|
||||
<components.Control {...rest}>
|
||||
👎 {children}
|
||||
</components.Control>
|
||||
)}}
|
||||
const BadSelect = (props) => (
|
||||
<Select
|
||||
{...props}
|
||||
components={{
|
||||
Control: ({ children, ...rest }) => <components.Control {...rest}>👎 {children}</components.Control>,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
// Good: Custom component declared outside of the Select scope
|
||||
const Control = <IconLeading icon={Plus}/>
|
||||
|
||||
const GoodSelect = props => <Select {...props} components={{ Control }} />
|
||||
const Control = <IconLeading icon={Plus} />;
|
||||
|
||||
const GoodSelect = (props) => <Select {...props} components={{ Control }} />;
|
||||
```
|
||||
|
||||
<Examples title="States ">
|
||||
|
|
@ -108,11 +98,11 @@ const GoodSelect = props => <Select {...props} components={{ Control }} />
|
|||
</Example> */}
|
||||
</Examples>
|
||||
|
||||
|
||||
## Select Story
|
||||
|
||||
<Canvas>
|
||||
<Story name="Default">
|
||||
<VariantsTable titles={['Default']} columnMinWidth={450} >
|
||||
<VariantsTable titles={["Default"]} columnMinWidth={450}>
|
||||
<VariantRow>
|
||||
<SelectField options={options} label={"Default Select"} />
|
||||
</VariantRow>
|
||||
|
|
|
|||
|
|
@ -30,52 +30,52 @@ Defines the spacing guide used in Cal.coms design system
|
|||
<Example title="0"></Example>
|
||||
<Example title="px">
|
||||
<Tooltip content="1px">
|
||||
<div className="h-4 w-px bg-inverted rounded-sm"> </div>
|
||||
<div className="bg-inverted h-4 w-px rounded-sm"> </div>
|
||||
</Tooltip>
|
||||
</Example>
|
||||
<Example title="0.5">
|
||||
<Tooltip content="2px">
|
||||
<div className="h-4 w-0.5 bg-inverted rounded-sm"> </div>
|
||||
<div className="bg-inverted h-4 w-0.5 rounded-sm"> </div>
|
||||
</Tooltip>
|
||||
</Example>
|
||||
<Example title="1">
|
||||
<Tooltip content="4px">
|
||||
<div className="h-4 w-1 bg-inverted rounded-sm"> </div>
|
||||
<div className="bg-inverted h-4 w-1 rounded-sm"> </div>
|
||||
</Tooltip>
|
||||
</Example>
|
||||
<Example title="2">
|
||||
<Tooltip content="8px">
|
||||
<div className="h-4 w-2 bg-inverted rounded-sm"> </div>
|
||||
<div className="bg-inverted h-4 w-2 rounded-sm"> </div>
|
||||
</Tooltip>
|
||||
</Example>
|
||||
<Example title="3">
|
||||
<Tooltip content="12px">
|
||||
<div className="h-4 w-3 bg-inverted rounded-sm"> </div>
|
||||
<div className="bg-inverted h-4 w-3 rounded-sm"> </div>
|
||||
</Tooltip>
|
||||
</Example>
|
||||
<Example title="4">
|
||||
<Tooltip content="16px">
|
||||
<div className="h-4 w-4 bg-inverted rounded-sm"> </div>
|
||||
<div className="bg-inverted h-4 w-4 rounded-sm"> </div>
|
||||
</Tooltip>
|
||||
</Example>
|
||||
<Example title="5">
|
||||
<Tooltip content="20px">
|
||||
<div className="h-4 w-5 bg-inverted rounded-sm"> </div>
|
||||
<div className="bg-inverted h-4 w-5 rounded-sm"> </div>
|
||||
</Tooltip>
|
||||
</Example>
|
||||
<Example title="6">
|
||||
<Tooltip content="24px">
|
||||
<div className="h-4 w-6 bg-inverted rounded-sm"> </div>
|
||||
<div className="bg-inverted h-4 w-6 rounded-sm"> </div>
|
||||
</Tooltip>
|
||||
</Example>
|
||||
<Example title="8">
|
||||
<Tooltip content="32px">
|
||||
<div className="h-4 w-8 bg-inverted rounded-sm"> </div>
|
||||
<div className="bg-inverted h-4 w-8 rounded-sm"> </div>
|
||||
</Tooltip>
|
||||
</Example>
|
||||
<Example title="10">
|
||||
<Tooltip content="48px">
|
||||
<div className="h-4 w-10 bg-inverted rounded-sm"> </div>
|
||||
<div className="bg-inverted h-4 w-10 rounded-sm"> </div>
|
||||
</Tooltip>
|
||||
</Example>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,29 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
||||
import { List, ListItem } from './List';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { List, ListItem } from "./List";
|
||||
|
||||
<Meta title="UI/List" component={List} />
|
||||
|
||||
<Title title="List" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
|
||||
|
||||
## Definition
|
||||
|
||||
Sums it up nicely.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="List">
|
||||
<Story name="List">
|
||||
<VariantsTable titles={[]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
TODO!
|
||||
</VariantRow>
|
||||
<VariantRow variant="Default">TODO!</VariantRow>
|
||||
</VariantsTable>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,30 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
||||
import Logo from './Logo';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import Logo from "./Logo";
|
||||
|
||||
<Meta title="UI/Logo" component={Logo} />
|
||||
|
||||
<Title title="Logo" suffix="Brief" subtitle="Version 2.0 — Last Update: 02 Jan 2023" />
|
||||
|
||||
## Definition
|
||||
|
||||
Main Cal.com brand logo
|
||||
|
||||
<CustomArgsTable of={Logo} />
|
||||
|
||||
<Canvas>
|
||||
<Story name="Logo">
|
||||
<VariantsTable titles={['']} columnMinWidth={150}>
|
||||
<VariantsTable titles={[""]} columnMinWidth={150}>
|
||||
<VariantRow variant="Small">
|
||||
<Logo small />
|
||||
</VariantRow>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
CustomArgsTable,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { Button } from "../button";
|
||||
import {
|
||||
Sheet,
|
||||
SheetClose,
|
||||
|
|
@ -22,9 +23,6 @@ import {
|
|||
SheetTrigger,
|
||||
} from "./sheet";
|
||||
|
||||
import {Button} from "../button";
|
||||
|
||||
|
||||
<Meta title="UI/Sheet" />
|
||||
|
||||
<Title title="Sheet" suffix="Brief" subtitle="Version 2.0 — Last Update: 21 June 2023" />
|
||||
|
|
@ -43,9 +41,7 @@ A sheet is a container that can be used to display content on differnt sides of
|
|||
<SheetContent position="right" size={"default"}>
|
||||
<SheetHeader>
|
||||
<SheetTitle>Edit profile</SheetTitle>
|
||||
<SheetDescription>
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</SheetDescription>
|
||||
<SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
|
||||
</SheetHeader>
|
||||
<SheetFooter>
|
||||
<SheetClose asChild>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,30 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer } from './';
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
VariantsTable,
|
||||
VariantColumn,
|
||||
RowTitles,
|
||||
CustomArgsTable,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer } from "./";
|
||||
|
||||
<Meta title="UI/Skeleton" component={Skeleton} />
|
||||
|
||||
<Title title="Skeleton" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||
|
||||
|
||||
## Definition
|
||||
|
||||
Skeletons are used as a placeholder to the content while the content is being loaded. It is used to improve the user experience by providing a visual cue that the content is loading.
|
||||
|
||||
## Structure
|
||||
|
||||
<CustomArgsTable of={Skeleton} />
|
||||
|
||||
|
||||
<Examples title="Skeleton Avatar">
|
||||
<Example title="Primary">
|
||||
<SkeletonAvatar className="h-8 w-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
|
|
@ -8,24 +9,23 @@ import {
|
|||
VariantColumn,
|
||||
RowTitles,
|
||||
CustomArgsTable,
|
||||
VariantRow
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { SuccessToast,ErrorToast,WarningToast,DefaultToast } from './';
|
||||
import { SuccessToast, ErrorToast, WarningToast, DefaultToast } from "./";
|
||||
|
||||
<Meta title="UI/Toasts" component={DefaultToast} />
|
||||
|
||||
<Title title="Toasts" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||
|
||||
|
||||
## Definition
|
||||
|
||||
Toasts are used to show an action has had a impact. If a user submits a form a toast should be shown to notify the user there has been a success
|
||||
|
||||
## Structure
|
||||
|
||||
<CustomArgsTable of={DefaultToast} />
|
||||
|
||||
|
||||
<Examples title="Toasts">
|
||||
<Example title="Default">
|
||||
<DefaultToast message="Default Toast" toastVisible={true} />
|
||||
|
|
@ -44,17 +44,18 @@ Toasts are used to show an action has had a impact. If a user submits a form a t
|
|||
## Toast Story
|
||||
|
||||
<Canvas>
|
||||
<Story name="Default"
|
||||
<Story
|
||||
name="Default"
|
||||
args={{
|
||||
message: 'Default Toast',
|
||||
toastVisible: true
|
||||
message: "Default Toast",
|
||||
toastVisible: true,
|
||||
}}
|
||||
argTypes={{
|
||||
message: { control: 'text' },
|
||||
toastVisible: { control: 'boolean'}
|
||||
message: { control: "text" },
|
||||
toastVisible: { control: "boolean" },
|
||||
}}>
|
||||
{({ message, toastVisible }) => (
|
||||
<VariantsTable titles={['Default','Success', 'Warning', 'Error']} columnMinWidth={150}>
|
||||
<VariantsTable titles={["Default", "Success", "Warning", "Error"]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<DefaultToast message={message} toastVisible={toastVisible} />
|
||||
<SuccessToast message={message} toastVisible={toastVisible} />
|
||||
|
|
|
|||
|
|
@ -1,51 +1,60 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
||||
import { TooltipProvider } from "@radix-ui/react-tooltip";
|
||||
import Tooltip from './Tooltip';
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import Tooltip from "./Tooltip";
|
||||
|
||||
<Meta title="UI/Tooltip" component={Tooltip} />
|
||||
|
||||
<Title title="Tooltip" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
|
||||
|
||||
## Definition
|
||||
|
||||
Tooltip components can be used to provide additional information about an element when the user hovers over or focuses on the element.
|
||||
|
||||
<CustomArgsTable of={Tooltip} />
|
||||
|
||||
|
||||
|
||||
<Canvas>
|
||||
<Story name="Tooltip"
|
||||
<Story
|
||||
name="Tooltip"
|
||||
args={{
|
||||
alertMsg: 'Copied!',
|
||||
alertMsg: "Copied!",
|
||||
hoverMsg: "Copy to clipboard",
|
||||
content: 'Hover Me',
|
||||
content: "Hover Me",
|
||||
}}
|
||||
argTypes={{
|
||||
alertMsg: {
|
||||
control: {
|
||||
type: 'text',
|
||||
type: "text",
|
||||
},
|
||||
},
|
||||
hoverMsg: {
|
||||
control: {
|
||||
type: 'text',
|
||||
type: "text",
|
||||
},
|
||||
},
|
||||
content: {
|
||||
control: {
|
||||
type: 'text',
|
||||
type: "text",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{({ alertMsg, hoverMsg, content }) => (
|
||||
<TooltipProvider>
|
||||
<VariantsTable titles={['']} columnMinWidth={150}>
|
||||
<VariantsTable titles={[""]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<Tooltip content={`${hoverMsg}`}>
|
||||
<span
|
||||
className="dark:text-darkgray-50 p-2 bg-brand-default rounded-md text-gray-100 dark:bg-darkgray-900 hover:cursor-pointer"
|
||||
className="dark:text-darkgray-50 bg-brand-default dark:bg-darkgray-900 rounded-md p-2 text-gray-100 hover:cursor-pointer"
|
||||
onClick={() => {
|
||||
alert(`${alertMsg}`);
|
||||
}}>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,27 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
|
||||
import { TopBanner } from './TopBanner'
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { TopBanner } from "./TopBanner";
|
||||
|
||||
<Meta title="UI/TopBanner" component={TopBanner} />
|
||||
|
||||
<Title title="TopBanner" suffix="Brief" />
|
||||
|
||||
|
||||
## Definition
|
||||
|
||||
Top banner will be position on the very top of the page to communicate on what’s wrong or what’s new.
|
||||
|
||||
|
||||
## Structure
|
||||
|
||||
Each toast has a state to represent neutral, positive or negative responses.
|
||||
|
||||
<CustomArgsTable of={TopBanner} />
|
||||
|
|
@ -64,21 +74,22 @@ Each toast has a state to represent neutral, positive or negative responses.
|
|||
</Examples>
|
||||
|
||||
<Canvas>
|
||||
<Story name="TopBanner"
|
||||
<Story
|
||||
name="TopBanner"
|
||||
args={{
|
||||
text: 'Something big is happening we want you to know about.',
|
||||
variant: 'default'
|
||||
text: "Something big is happening we want you to know about.",
|
||||
variant: "default",
|
||||
}}
|
||||
argTypes={{
|
||||
variant: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['default', 'warning', 'error'],
|
||||
type: "select",
|
||||
options: ["default", "warning", "error"],
|
||||
},
|
||||
},
|
||||
text: {
|
||||
control: {
|
||||
type: 'text',
|
||||
type: "text",
|
||||
},
|
||||
},
|
||||
}}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue