chore: prettier
parent
aa5e2ac9a5
commit
8071016848
|
@ -5,16 +5,15 @@ on:
|
||||||
types:
|
types:
|
||||||
- opened
|
- opened
|
||||||
|
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
label_on_pr:
|
label_on_pr:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
permissions:
|
permissions:
|
||||||
contents: none
|
contents: none
|
||||||
issues: read
|
issues: read
|
||||||
pull-requests: write
|
pull-requests: write
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- name: Apply labels from linked issue to PR
|
- name: Apply labels from linked issue to PR
|
||||||
uses: actions/github-script@v5
|
uses: actions/github-script@v5
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
# .github/workflows/chromatic.yml
|
# .github/workflows/chromatic.yml
|
||||||
|
|
||||||
# Workflow name
|
# Workflow name
|
||||||
name: 'Chromatic'
|
name: "Chromatic"
|
||||||
|
|
||||||
# Event for the workflow
|
# Event for the workflow
|
||||||
on:
|
on:
|
||||||
|
|
|
@ -44,7 +44,7 @@ jobs:
|
||||||
EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
|
EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
|
||||||
EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
|
EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
|
||||||
EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
|
EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
|
||||||
EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD}}
|
EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD}}
|
||||||
GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
|
GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
|
||||||
NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
|
NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
|
||||||
NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
|
NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
|
||||||
|
|
|
@ -8,7 +8,7 @@ on: # yamllint disable-line rule:truthy
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
inputs:
|
inputs:
|
||||||
RELEASE_TAG:
|
RELEASE_TAG:
|
||||||
description: 'v{Major}.{Minor}.{Patch}'
|
description: "v{Major}.{Minor}.{Patch}"
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
release:
|
release:
|
||||||
|
@ -21,7 +21,7 @@ jobs:
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v3
|
||||||
|
|
||||||
- name: "Determine tag"
|
- 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"
|
- name: "Run remote release workflow"
|
||||||
uses: "actions/github-script@v6"
|
uses: "actions/github-script@v6"
|
||||||
|
|
|
@ -29,11 +29,11 @@ jobs:
|
||||||
header: pr-title-lint-error
|
header: pr-title-lint-error
|
||||||
message: |
|
message: |
|
||||||
Hey there and thank you for opening this pull request! 👋🏼
|
Hey there and thank you for opening this pull request! 👋🏼
|
||||||
|
|
||||||
We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
|
We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
|
||||||
|
|
||||||
Details:
|
Details:
|
||||||
|
|
||||||
```
|
```
|
||||||
${{ steps.lint_pr_title.outputs.error_message }}
|
${{ steps.lint_pr_title.outputs.error_message }}
|
||||||
```
|
```
|
||||||
|
@ -41,7 +41,7 @@ jobs:
|
||||||
# Delete a previous comment when the issue has been resolved
|
# Delete a previous comment when the issue has been resolved
|
||||||
- if: ${{ steps.lint_pr_title.outputs.error_message == null }}
|
- if: ${{ steps.lint_pr_title.outputs.error_message == null }}
|
||||||
uses: marocchino/sticky-pull-request-comment@v2
|
uses: marocchino/sticky-pull-request-comment@v2
|
||||||
with:
|
with:
|
||||||
header: pr-title-lint-error
|
header: pr-title-lint-error
|
||||||
message: |
|
message: |
|
||||||
Thank you for following the naming conventions! 🙏
|
Thank you for following the naming conventions! 🙏
|
||||||
|
|
|
@ -40,4 +40,4 @@ vscode:
|
||||||
- bradlc.vscode-tailwindcss
|
- bradlc.vscode-tailwindcss
|
||||||
- ban.spellright
|
- ban.spellright
|
||||||
- stripe.vscode-stripe
|
- stripe.vscode-stripe
|
||||||
- Prisma.prisma
|
- Prisma.prisma
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
# Set the version of docker compose to use
|
# Set the version of docker compose to use
|
||||||
version: '3.9'
|
version: "3.9"
|
||||||
|
|
||||||
# The containers that compose the project
|
# The containers that compose the project
|
||||||
services:
|
services:
|
||||||
|
@ -8,8 +8,8 @@ services:
|
||||||
restart: always
|
restart: always
|
||||||
container_name: integration-tests-prisma
|
container_name: integration-tests-prisma
|
||||||
ports:
|
ports:
|
||||||
- '5433:5432'
|
- "5433:5432"
|
||||||
environment:
|
environment:
|
||||||
POSTGRES_USER: prisma
|
POSTGRES_USER: prisma
|
||||||
POSTGRES_PASSWORD: prisma
|
POSTGRES_PASSWORD: prisma
|
||||||
POSTGRES_DB: tests
|
POSTGRES_DB: tests
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
window.global = window;
|
window.global = window;
|
||||||
window.isEmbed = ()=> {
|
window.isEmbed = () => {
|
||||||
return location.search.includes("embed=")
|
return location.search.includes("embed=");
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<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>
|
</style>
|
||||||
|
|
|
@ -1,11 +1,21 @@
|
||||||
import { Meta } from '@storybook/addon-docs';
|
import { Meta } from "@storybook/addon-docs";
|
||||||
|
|
||||||
<Meta title="Introduction" />
|
<Meta title="Introduction" />
|
||||||
|
|
||||||
<div className="text-center flex flex-col items-center">
|
<div className="flex flex-col items-center text-center">
|
||||||
<h1 style={{marginBottom: '24px', marginTop: '36px'}}>Welcome to Cal.com UI</h1>
|
<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>
|
||||||
<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>
|
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>
|
</div>
|
||||||
|
|
||||||
<img src="/sb-cover.jpg" />
|
<img src="/sb-cover.jpg" />
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
@import url("../../../packages/features/calendars/weeklyview/styles/styles.css");
|
@import url("../../../packages/features/calendars/weeklyview/styles/styles.css");
|
||||||
|
|
||||||
.sbdocs {
|
.sbdocs {
|
||||||
font-family: 'Inter var' !important;
|
font-family: "Inter var" !important;
|
||||||
padding: 0!important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#docs-root {
|
#docs-root {
|
||||||
|
@ -21,8 +21,8 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border: none;
|
border: none;
|
||||||
border-top: 2px solid rgba(0, 0, 0, 0.12);
|
border-top: 2px solid rgba(0, 0, 0, 0.12);
|
||||||
padding-top: 12px!important;
|
padding-top: 12px !important;
|
||||||
padding-bottom: 12px!important;
|
padding-bottom: 12px !important;
|
||||||
margin: 82px 0 0 0;
|
margin: 82px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Docs table **/
|
/** Docs table **/
|
||||||
.custom-args-wrapper{
|
.custom-args-wrapper {
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
@ -45,7 +45,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.docblock-argstable-body {
|
.docblock-argstable-body {
|
||||||
box-shadow: none!important;
|
box-shadow: none !important;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,7 +64,7 @@
|
||||||
|
|
||||||
.docblock-argstable-body div p,
|
.docblock-argstable-body div p,
|
||||||
.docblock-argstable-body div span {
|
.docblock-argstable-body div span {
|
||||||
color: #8F8F8F !important;
|
color: #8f8f8f !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Custom components **/
|
/** Custom components **/
|
||||||
|
@ -83,8 +83,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.story-title h1 span {
|
.story-title h1 span {
|
||||||
color: #9CA3AF;
|
color: #9ca3af;
|
||||||
font-family: 'Inter var';
|
font-family: "Inter var";
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
|
@ -96,7 +96,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.examples {
|
.examples {
|
||||||
background-color: #F9FAFB;
|
background-color: #f9fafb;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -111,14 +111,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.examples-title {
|
.examples-title {
|
||||||
color: #8F8F8F;
|
color: #8f8f8f;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.examples-item-title {
|
.examples-item-title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #8F8F8F;
|
color: #8f8f8f;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -130,7 +130,7 @@
|
||||||
.examples-footnote p,
|
.examples-footnote p,
|
||||||
.examples-footnote ul,
|
.examples-footnote ul,
|
||||||
.examples-footnote li {
|
.examples-footnote li {
|
||||||
color: #8F8F8F;
|
color: #8f8f8f;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -139,11 +139,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.examples-footnote li {
|
.examples-footnote li {
|
||||||
margin: 0!important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.story-note {
|
.story-note {
|
||||||
background-color: #F9FAFB;
|
background-color: #f9fafb;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
@ -161,12 +161,12 @@
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
border-radius: none!important;
|
border-radius: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-story > div:first-child {
|
.docs-story > div:first-child {
|
||||||
padding: 0!important;
|
padding: 0 !important;
|
||||||
margin: 0!important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-story .innerZoomElementWrapper > div {
|
.docs-story .innerZoomElementWrapper > div {
|
||||||
|
@ -174,7 +174,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.sb-main-padded {
|
.sb-main-padded {
|
||||||
padding: 0!important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1200px) {
|
@media screen and (max-width: 1200px) {
|
||||||
|
@ -198,74 +198,72 @@
|
||||||
:root {
|
:root {
|
||||||
/* background */
|
/* background */
|
||||||
|
|
||||||
--cal-bg-emphasis: #E5E7EB;
|
--cal-bg-emphasis: #e5e7eb;
|
||||||
--cal-bg: white;
|
--cal-bg: white;
|
||||||
--cal-bg-subtle: #F3F4F6;
|
--cal-bg-subtle: #f3f4f6;
|
||||||
--cal-bg-muted: #F9FAFB;
|
--cal-bg-muted: #f9fafb;
|
||||||
--cal-bg-inverted: #111827;
|
--cal-bg-inverted: #111827;
|
||||||
|
|
||||||
/* background -> components*/
|
/* background -> components*/
|
||||||
--cal-bg-info: #DEE9FC;
|
--cal-bg-info: #dee9fc;
|
||||||
--cal-bg-success: #E2FBE8;
|
--cal-bg-success: #e2fbe8;
|
||||||
--cal-bg-attention: #FCEED8;
|
--cal-bg-attention: #fceed8;
|
||||||
--cal-bg-error: #F9E3E2;
|
--cal-bg-error: #f9e3e2;
|
||||||
--cal-bg-dark-error: #752522;
|
--cal-bg-dark-error: #752522;
|
||||||
|
|
||||||
|
|
||||||
/* Borders */
|
/* Borders */
|
||||||
--cal-border-emphasis:#9CA3AF;
|
--cal-border-emphasis: #9ca3af;
|
||||||
--cal-border: #D1D5DB;
|
--cal-border: #d1d5db;
|
||||||
--cal-border-subtle:#E5E7EB;
|
--cal-border-subtle: #e5e7eb;
|
||||||
--cal-border-muted:#F3F4F6;
|
--cal-border-muted: #f3f4f6;
|
||||||
--cal-border-error: #aa2e26;
|
--cal-border-error: #aa2e26;
|
||||||
|
|
||||||
/* Content/Text */
|
/* Content/Text */
|
||||||
--cal-text-emphasis: #111827;
|
--cal-text-emphasis: #111827;
|
||||||
--cal-text:#374151;
|
--cal-text: #374151;
|
||||||
--cal-text-subtle:#6B7280;
|
--cal-text-subtle: #6b7280;
|
||||||
--cal-text-muted:#9CA3AF;
|
--cal-text-muted: #9ca3af;
|
||||||
--cal-text-inverted:white;
|
--cal-text-inverted: white;
|
||||||
|
|
||||||
/* Content/Text -> components */
|
/* Content/Text -> components */
|
||||||
--cal-text-info:#253985;
|
--cal-text-info: #253985;
|
||||||
--cal-text-success:#285231;
|
--cal-text-success: #285231;
|
||||||
--cal-text-attention:#73321B;
|
--cal-text-attention: #73321b;
|
||||||
--cal-text-error:#752522;
|
--cal-text-error: #752522;
|
||||||
|
|
||||||
/* Brand shinanigans
|
/* Brand shinanigans
|
||||||
-> These will be computed for the users theme at runtime.
|
-> These will be computed for the users theme at runtime.
|
||||||
*/
|
*/
|
||||||
--cal-brand:#111827;
|
--cal-brand: #111827;
|
||||||
--cal-brand-emphasis:#101010;
|
--cal-brand-emphasis: #101010;
|
||||||
--cal-brand-text: white;
|
--cal-brand-text: white;
|
||||||
}
|
}
|
||||||
.dark {
|
.dark {
|
||||||
/* background */
|
/* background */
|
||||||
|
|
||||||
--cal-bg-emphasis: #2B2B2B;
|
--cal-bg-emphasis: #2b2b2b;
|
||||||
--cal-bg: #101010;
|
--cal-bg: #101010;
|
||||||
--cal-bg-subtle: #2B2B2B;
|
--cal-bg-subtle: #2b2b2b;
|
||||||
--cal-bg-muted: #1C1C1C;
|
--cal-bg-muted: #1c1c1c;
|
||||||
--cal-bg-inverted: #F3F4F6;
|
--cal-bg-inverted: #f3f4f6;
|
||||||
|
|
||||||
/* background -> components*/
|
/* background -> components*/
|
||||||
--cal-bg-info: #DEE9FC;
|
--cal-bg-info: #dee9fc;
|
||||||
--cal-bg-success: #E2FBE8;
|
--cal-bg-success: #e2fbe8;
|
||||||
--cal-bg-attention: #FCEED8;
|
--cal-bg-attention: #fceed8;
|
||||||
--cal-bg-error: #F9E3E2;
|
--cal-bg-error: #f9e3e2;
|
||||||
--cal-bg-dark-error: #752522;
|
--cal-bg-dark-error: #752522;
|
||||||
|
|
||||||
|
|
||||||
/* Borders */
|
/* Borders */
|
||||||
--cal-border-emphasis: #575757;
|
--cal-border-emphasis: #575757;
|
||||||
--cal-border: #444444;
|
--cal-border: #444444;
|
||||||
--cal-border-subtle: #2B2B2B;
|
--cal-border-subtle: #2b2b2b;
|
||||||
--cal-border-muted: #1C1C1C;
|
--cal-border-muted: #1c1c1c;
|
||||||
--cal-border-error: #aa2e26;
|
--cal-border-error: #aa2e26;
|
||||||
|
|
||||||
/* Content/Text */
|
/* Content/Text */
|
||||||
--cal-text-emphasis: #F3F4F6;
|
--cal-text-emphasis: #f3f4f6;
|
||||||
--cal-text: #D6D6D6;
|
--cal-text: #d6d6d6;
|
||||||
--cal-text-subtle: #757575;
|
--cal-text-subtle: #757575;
|
||||||
--cal-text-muted: #575757;
|
--cal-text-muted: #575757;
|
||||||
--cal-text-inverted: #101010;
|
--cal-text-inverted: #101010;
|
||||||
|
@ -273,7 +271,7 @@
|
||||||
/* Content/Text -> components */
|
/* Content/Text -> components */
|
||||||
--cal-text-info: #253985;
|
--cal-text-info: #253985;
|
||||||
--cal-text-success: #285231;
|
--cal-text-success: #285231;
|
||||||
--cal-text-attention: #73321B;
|
--cal-text-attention: #73321b;
|
||||||
--cal-text-error: #752522;
|
--cal-text-error: #752522;
|
||||||
|
|
||||||
/* Brand shenanigans
|
/* Brand shenanigans
|
||||||
|
|
|
@ -2,8 +2,8 @@ html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
Droid Sans, Helvetica Neue, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
@ -21,7 +21,7 @@ a {
|
||||||
}
|
}
|
||||||
.swagger-ui .opblock .opblock-summary {
|
.swagger-ui .opblock .opblock-summary {
|
||||||
display: grid;
|
display: grid;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.opblock-summary-path {
|
.opblock-summary-path {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
@ -43,22 +43,22 @@ a {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
.swagger-ui .scheme-container {
|
.swagger-ui .scheme-container {
|
||||||
padding: 14px 0;
|
padding: 14px 0;
|
||||||
}
|
}
|
||||||
.swagger-ui .info {
|
.swagger-ui .info {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
.swagger-ui .auth-wrapper {
|
.swagger-ui .auth-wrapper {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
.swagger-ui .authorization__btn {
|
.swagger-ui .authorization__btn {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.swagger-ui .opblock {
|
.swagger-ui .opblock {
|
||||||
margin: 0 0 5px;
|
margin: 0 0 5px;
|
||||||
}
|
}
|
||||||
button.opblock-summary-control > svg {
|
button.opblock-summary-control > svg {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.swagger-ui .filter .operation-filter-input {
|
.swagger-ui .filter .operation-filter-input {
|
||||||
border: 2px solid #d8dde7;
|
border: 2px solid #d8dde7;
|
||||||
|
@ -73,15 +73,16 @@ a {
|
||||||
.swagger-ui .info .title small {
|
.swagger-ui .info .title small {
|
||||||
top: 5px;
|
top: 5px;
|
||||||
}
|
}
|
||||||
.swagger-ui a.nostyle, .swagger-ui a.nostyle:visited {
|
.swagger-ui a.nostyle,
|
||||||
|
.swagger-ui a.nostyle:visited {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
div.request-snippets > div.curl-command > div:nth-child(1) {
|
div.request-snippets > div.curl-command > div:nth-child(1) {
|
||||||
overscroll-behavior: contain;
|
overscroll-behavior: contain;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
.swagger-ui .opblock-body pre.microlight {
|
.swagger-ui .opblock-body pre.microlight {
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
}
|
}
|
||||||
.swagger-ui table tbody tr td {
|
.swagger-ui table tbody tr td {
|
||||||
padding: 0px 0 0;
|
padding: 0px 0 0;
|
||||||
|
@ -91,7 +92,7 @@ a {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > tbody > tr {
|
div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > tbody > tr {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
font-size: 60%;
|
font-size: 60%;
|
||||||
|
@ -99,4 +100,4 @@ a {
|
||||||
div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > thead > tr {
|
div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > thead > tr {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -75,7 +75,7 @@
|
||||||
/* Content/Text */
|
/* Content/Text */
|
||||||
--cal-text-emphasis: #f3f4f6;
|
--cal-text-emphasis: #f3f4f6;
|
||||||
--cal-text: #d6d6d6;
|
--cal-text: #d6d6d6;
|
||||||
--cal-text-subtle: #A5a5a5;
|
--cal-text-subtle: #a5a5a5;
|
||||||
--cal-text-muted: #575757;
|
--cal-text-muted: #575757;
|
||||||
--cal-text-inverted: #101010;
|
--cal-text-inverted: #101010;
|
||||||
|
|
||||||
|
@ -100,7 +100,7 @@
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: var(--cal-brand-text);
|
color: var(--cal-brand-text);
|
||||||
background: var(--cal-brand);
|
background: var(--cal-brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
@ -108,8 +108,6 @@ body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Desktop App specific CSS
|
Desktop App specific CSS
|
||||||
https://docs.todesktop.com/
|
https://docs.todesktop.com/
|
||||||
|
@ -170,17 +168,17 @@ html.todesktop aside {
|
||||||
margin: 0px -6px;
|
margin: 0px -6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
html.todesktop-platform-darwin .desktop-transparent{
|
html.todesktop-platform-darwin .desktop-transparent {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
html.todesktop-platform-darwin.dark main.bg-default{
|
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{
|
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);
|
border-color: var(--brand-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
.scroll-bar {
|
.scroll-bar {
|
||||||
@apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent;
|
@apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TODO: avoid global specific css */
|
/* TODO: avoid global specific css */
|
||||||
|
@ -261,7 +256,6 @@ select:focus {
|
||||||
transform: translateX(16px);
|
transform: translateX(16px);
|
||||||
} */
|
} */
|
||||||
|
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
/* slider */
|
/* slider */
|
||||||
.slider {
|
.slider {
|
||||||
|
@ -512,5 +506,5 @@ select:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-tel-input .flag-dropdown {
|
.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
|
# Set the version of docker compose to use
|
||||||
version: '3.9'
|
version: "3.9"
|
||||||
|
|
||||||
# The containers that compose the project
|
# The containers that compose the project
|
||||||
services:
|
services:
|
||||||
|
@ -8,8 +8,8 @@ services:
|
||||||
restart: always
|
restart: always
|
||||||
container_name: integration-tests-prisma
|
container_name: integration-tests-prisma
|
||||||
ports:
|
ports:
|
||||||
- '5433:5432'
|
- "5433:5432"
|
||||||
environment:
|
environment:
|
||||||
POSTGRES_USER: prisma
|
POSTGRES_USER: prisma
|
||||||
POSTGRES_PASSWORD: prisma
|
POSTGRES_PASSWORD: prisma
|
||||||
POSTGRES_DB: tests
|
POSTGRES_DB: tests
|
||||||
|
|
193
crowdin.yml
193
crowdin.yml
|
@ -1,10 +1,10 @@
|
||||||
#
|
#
|
||||||
# Your Crowdin credentials
|
# Your Crowdin credentials
|
||||||
#
|
#
|
||||||
"project_id_env" : "CROWDIN_PROJECT_ID"
|
"project_id_env": "CROWDIN_PROJECT_ID"
|
||||||
"api_token_env" : "CROWDIN_PERSONAL_TOKEN"
|
"api_token_env": "CROWDIN_PERSONAL_TOKEN"
|
||||||
"base_path" : "."
|
"base_path": "."
|
||||||
"base_url" : "https://cal.crowdin.com"
|
"base_url": "https://cal.crowdin.com"
|
||||||
|
|
||||||
#
|
#
|
||||||
# Choose file structure in Crowdin
|
# Choose file structure in Crowdin
|
||||||
|
@ -16,112 +16,111 @@
|
||||||
# Files configuration
|
# Files configuration
|
||||||
#
|
#
|
||||||
files: [
|
files: [
|
||||||
{
|
{
|
||||||
#
|
#
|
||||||
# Source files filter
|
# Source files filter
|
||||||
# e.g. "/resources/en/*.json"
|
# e.g. "/resources/en/*.json"
|
||||||
#
|
#
|
||||||
"source" : "/apps/web/public/static/locales/en/common.json",
|
"source": "/apps/web/public/static/locales/en/common.json",
|
||||||
|
|
||||||
#
|
#
|
||||||
# Where translations will be placed
|
# Where translations will be placed
|
||||||
# e.g. "/resources/%two_letters_code%/%original_file_name%"
|
# e.g. "/resources/%two_letters_code%/%original_file_name%"
|
||||||
#
|
#
|
||||||
"translation" : "/apps/web/public/static/locales/%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"]
|
||||||
|
#
|
||||||
|
#"ignore" : [],
|
||||||
|
|
||||||
#
|
#
|
||||||
# Files or directories for ignore
|
# The dest allows you to specify a file name in Crowdin
|
||||||
# e.g. ["/**/?.txt", "/**/[0-9].txt", "/**/*\?*.txt"]
|
# e.g. "/messages.json"
|
||||||
#
|
#
|
||||||
#"ignore" : [],
|
#"dest" : "",
|
||||||
|
|
||||||
#
|
#
|
||||||
# The dest allows you to specify a file name in Crowdin
|
# File type
|
||||||
# e.g. "/messages.json"
|
# e.g. "json"
|
||||||
#
|
#
|
||||||
#"dest" : "",
|
#"type" : "",
|
||||||
|
|
||||||
#
|
#
|
||||||
# File type
|
# The parameter "update_option" is optional. If it is not set, after the files update the translations for changed strings will be removed. Use to fix typos and for minor changes in the source strings
|
||||||
# e.g. "json"
|
# e.g. "update_as_unapproved" or "update_without_changes"
|
||||||
#
|
#
|
||||||
#"type" : "",
|
#"update_option" : "",
|
||||||
|
|
||||||
#
|
#
|
||||||
# The parameter "update_option" is optional. If it is not set, after the files update the translations for changed strings will be removed. Use to fix typos and for minor changes in the source strings
|
# Start block (for XML only)
|
||||||
# e.g. "update_as_unapproved" or "update_without_changes"
|
#
|
||||||
#
|
|
||||||
#"update_option" : "",
|
|
||||||
|
|
||||||
#
|
#
|
||||||
# Start block (for XML only)
|
# Defines whether to translate tags attributes.
|
||||||
#
|
# e.g. 0 or 1 (Default is 1)
|
||||||
|
#
|
||||||
|
# "translate_attributes" : 1,
|
||||||
|
|
||||||
#
|
#
|
||||||
# Defines whether to translate tags attributes.
|
# Defines whether to translate texts placed inside the tags.
|
||||||
# e.g. 0 or 1 (Default is 1)
|
# e.g. 0 or 1 (Default is 1)
|
||||||
#
|
#
|
||||||
# "translate_attributes" : 1,
|
# "translate_content" : 1,
|
||||||
|
|
||||||
#
|
#
|
||||||
# Defines whether to translate texts placed inside the tags.
|
# This is an array of strings, where each item is the XPaths to DOM element that should be imported
|
||||||
# e.g. 0 or 1 (Default is 1)
|
# e.g. ["/content/text", "/content/text[@value]"]
|
||||||
#
|
#
|
||||||
# "translate_content" : 1,
|
# "translatable_elements" : [],
|
||||||
|
|
||||||
#
|
#
|
||||||
# This is an array of strings, where each item is the XPaths to DOM element that should be imported
|
# Defines whether to split long texts into smaller text segments
|
||||||
# e.g. ["/content/text", "/content/text[@value]"]
|
# e.g. 0 or 1 (Default is 1)
|
||||||
#
|
#
|
||||||
# "translatable_elements" : [],
|
# "content_segmentation" : 1,
|
||||||
|
|
||||||
#
|
#
|
||||||
# Defines whether to split long texts into smaller text segments
|
# End block (for XML only)
|
||||||
# e.g. 0 or 1 (Default is 1)
|
#
|
||||||
#
|
|
||||||
# "content_segmentation" : 1,
|
|
||||||
|
|
||||||
#
|
#
|
||||||
# End block (for XML only)
|
# Start .properties block
|
||||||
#
|
#
|
||||||
|
|
||||||
#
|
#
|
||||||
# Start .properties block
|
# Defines whether single quote should be escaped by another single quote or backslash in exported translations
|
||||||
#
|
# e.g. 0 or 1 or 2 or 3 (Default is 3)
|
||||||
|
# 0 - do not escape single quote;
|
||||||
|
# 1 - escape single quote by another single quote;
|
||||||
|
# 2 - escape single quote by backslash;
|
||||||
|
# 3 - escape single quote by another single quote only in strings containing variables ( {0} ).
|
||||||
|
#
|
||||||
|
# "escape_quotes" : 3,
|
||||||
|
|
||||||
#
|
#
|
||||||
# Defines whether single quote should be escaped by another single quote or backslash in exported translations
|
# Defines whether any special characters (=, :, ! and #) should be escaped by backslash in exported translations.
|
||||||
# e.g. 0 or 1 or 2 or 3 (Default is 3)
|
# e.g. 0 or 1 (Default is 0)
|
||||||
# 0 - do not escape single quote;
|
# 0 - do not escape special characters
|
||||||
# 1 - escape single quote by another single quote;
|
# 1 - escape special characters by a backslash
|
||||||
# 2 - escape single quote by backslash;
|
#
|
||||||
# 3 - escape single quote by another single quote only in strings containing variables ( {0} ).
|
# "escape_special_characters": 0
|
||||||
#
|
#
|
||||||
# "escape_quotes" : 3,
|
|
||||||
|
|
||||||
#
|
#
|
||||||
# Defines whether any special characters (=, :, ! and #) should be escaped by backslash in exported translations.
|
# End .properties block
|
||||||
# e.g. 0 or 1 (Default is 0)
|
#
|
||||||
# 0 - do not escape special characters
|
|
||||||
# 1 - escape special characters by a backslash
|
|
||||||
#
|
|
||||||
# "escape_special_characters": 0
|
|
||||||
#
|
|
||||||
|
|
||||||
#
|
#
|
||||||
# End .properties block
|
# Does the first line contain header?
|
||||||
#
|
# e.g. true or false
|
||||||
|
#
|
||||||
|
#"first_line_contains_header" : true,
|
||||||
|
|
||||||
#
|
#
|
||||||
# Does the first line contain header?
|
# for spreadsheets
|
||||||
# e.g. true or false
|
# e.g. "identifier,source_phrase,context,uk,ru,fr"
|
||||||
#
|
#
|
||||||
#"first_line_contains_header" : true,
|
# "scheme" : "",
|
||||||
|
},
|
||||||
#
|
]
|
||||||
# for spreadsheets
|
|
||||||
# e.g. "identifier,source_phrase,context,uk,ru,fr"
|
|
||||||
#
|
|
||||||
# "scheme" : "",
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
|
@ -1,27 +1,25 @@
|
||||||
|
|
||||||
// see https://inlang.com/
|
// see https://inlang.com/
|
||||||
export async function defineConfig(env) {
|
export async function defineConfig(env) {
|
||||||
|
const { default: i18nextPlugin } = await env.$import(
|
||||||
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(
|
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 {
|
return {
|
||||||
referenceLanguage: "en",
|
referenceLanguage: "en",
|
||||||
plugins: [
|
plugins: [
|
||||||
i18nextPlugin({
|
i18nextPlugin({
|
||||||
pathPattern: "./apps/web/public/static/locales/{language}/common.json",
|
pathPattern: "./apps/web/public/static/locales/{language}/common.json",
|
||||||
}),
|
}),
|
||||||
standardLintRules({
|
standardLintRules({
|
||||||
// deactivating identical pattern because of nested
|
// deactivating identical pattern because of nested
|
||||||
// resources like "de-DE" and "de-AT" where "de-AT"
|
// resources like "de-DE" and "de-AT" where "de-AT"
|
||||||
// contrains overwrites but the majority are identical patterns.
|
// contrains overwrites but the majority are identical patterns.
|
||||||
identicalPattern: "off"
|
identicalPattern: "off",
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import path from "path";
|
|
||||||
import os from "os";
|
import os from "os";
|
||||||
|
import path from "path";
|
||||||
|
|
||||||
export const APP_STORE_PATH = path.join(__dirname, "..", "..", "app-store");
|
export const APP_STORE_PATH = path.join(__dirname, "..", "..", "app-store");
|
||||||
export const TEMPLATES_PATH = path.join(APP_STORE_PATH, "templates");
|
export const TEMPLATES_PATH = path.join(APP_STORE_PATH, "templates");
|
||||||
export const IS_WINDOWS_PLATFORM = os.platform() === "win32";
|
export const IS_WINDOWS_PLATFORM = os.platform() === "win32";
|
||||||
|
|
|
@ -56,7 +56,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.cal-query-builder .rule--drag-handler,
|
.cal-query-builder .rule--drag-handler,
|
||||||
.cal-query-builder .rule--header {
|
.cal-query-builder .rule--header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -6,9 +6,7 @@
|
||||||
"logo": "icon.svg",
|
"logo": "icon.svg",
|
||||||
"url": "https://skiff.com/blog/skiff-cal-com-launch",
|
"url": "https://skiff.com/blog/skiff-cal-com-launch",
|
||||||
"variant": "calendar",
|
"variant": "calendar",
|
||||||
"categories": [
|
"categories": ["calendar"],
|
||||||
"calendar"
|
|
||||||
],
|
|
||||||
"publisher": "Skiff World, Inc.",
|
"publisher": "Skiff World, Inc.",
|
||||||
"email": "hello@skiff.org",
|
"email": "hello@skiff.org",
|
||||||
"description": "End-to-end encrypted, private calendar, email, notes, and drive.",
|
"description": "End-to-end encrypted, private calendar, email, notes, and drive.",
|
||||||
|
@ -16,4 +14,4 @@
|
||||||
"__createdUsingCli": true,
|
"__createdUsingCli": true,
|
||||||
"__template": "link-as-an-app",
|
"__template": "link-as-an-app",
|
||||||
"dirName": "skiff"
|
"dirName": "skiff"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,13 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||||
import { Title } from '@calcom/storybook/components'
|
|
||||||
|
import { Title } from "@calcom/storybook/components";
|
||||||
import { Icon } from "@calcom/ui";
|
import { Icon } from "@calcom/ui";
|
||||||
import { Booker } from './Booker';
|
|
||||||
|
import { Booker } from "./Booker";
|
||||||
|
|
||||||
<Meta title="Atoms/Booker" component={Booker} />
|
<Meta title="Atoms/Booker" component={Booker} />
|
||||||
|
|
||||||
<Title title="Booker"/>
|
<Title title="Booker" />
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="Booker">
|
<Story name="Booker">
|
||||||
|
|
|
@ -7,4 +7,4 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@import "../ui/styles/shared-globals.css";
|
@import "../ui/styles/shared-globals.css";
|
||||||
|
|
|
@ -1,46 +1,44 @@
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* background */
|
/* background */
|
||||||
|
|
||||||
--cal-bg-emphasis: #E5E7EB;
|
--cal-bg-emphasis: #e5e7eb;
|
||||||
--cal-bg: white;
|
--cal-bg: white;
|
||||||
--cal-bg-subtle: #F3F4F6;
|
--cal-bg-subtle: #f3f4f6;
|
||||||
--cal-bg-muted: #F9FAFB;
|
--cal-bg-muted: #f9fafb;
|
||||||
--cal-bg-inverted: #111827;
|
--cal-bg-inverted: #111827;
|
||||||
|
|
||||||
/* background -> components*/
|
/* background -> components*/
|
||||||
--cal-bg-info: #DEE9FC;
|
--cal-bg-info: #dee9fc;
|
||||||
--cal-bg-success: #E2FBE8;
|
--cal-bg-success: #e2fbe8;
|
||||||
--cal-bg-attention: #FCEED8;
|
--cal-bg-attention: #fceed8;
|
||||||
--cal-bg-error: #F9E3E2;
|
--cal-bg-error: #f9e3e2;
|
||||||
--cal-bg-dark-error: #752522;
|
--cal-bg-dark-error: #752522;
|
||||||
|
|
||||||
|
|
||||||
/* Borders */
|
/* Borders */
|
||||||
--cal-border-emphasis:#9CA3AF;
|
--cal-border-emphasis: #9ca3af;
|
||||||
--cal-border: #D1D5DB;
|
--cal-border: #d1d5db;
|
||||||
--cal-border-subtle:#E5E7EB;
|
--cal-border-subtle: #e5e7eb;
|
||||||
--cal-border-muted:#F3F4F6;
|
--cal-border-muted: #f3f4f6;
|
||||||
--cal-border-error: #aa2e26;
|
--cal-border-error: #aa2e26;
|
||||||
|
|
||||||
/* Content/Text */
|
/* Content/Text */
|
||||||
--cal-text-emphasis: #111827;
|
--cal-text-emphasis: #111827;
|
||||||
--cal-text:#374151;
|
--cal-text: #374151;
|
||||||
--cal-text-subtle:#6B7280;
|
--cal-text-subtle: #6b7280;
|
||||||
--cal-text-muted:#9CA3AF;
|
--cal-text-muted: #9ca3af;
|
||||||
--cal-text-inverted:white;
|
--cal-text-inverted: white;
|
||||||
|
|
||||||
/* Content/Text -> components */
|
/* Content/Text -> components */
|
||||||
--cal-text-info:#253985;
|
--cal-text-info: #253985;
|
||||||
--cal-text-success:#285231;
|
--cal-text-success: #285231;
|
||||||
--cal-text-attention:#73321B;
|
--cal-text-attention: #73321b;
|
||||||
--cal-text-error:#752522;
|
--cal-text-error: #752522;
|
||||||
|
|
||||||
/* Brand shenanigans
|
/* Brand shenanigans
|
||||||
-> These will be computed for the users theme at runtime.
|
-> These will be computed for the users theme at runtime.
|
||||||
*/
|
*/
|
||||||
--cal-brand:#111827;
|
--cal-brand: #111827;
|
||||||
--cal-brand-emphasis:#101010;
|
--cal-brand-emphasis: #101010;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Darkmode Colors -- TODO: WIP*/
|
/* Darkmode Colors -- TODO: WIP*/
|
||||||
|
@ -54,37 +52,35 @@
|
||||||
--cal-bg-inverted: #f3f4f6;
|
--cal-bg-inverted: #f3f4f6;
|
||||||
|
|
||||||
/* background -> components*/
|
/* background -> components*/
|
||||||
--cal-bg-info: #DEE9FC;
|
--cal-bg-info: #dee9fc;
|
||||||
--cal-bg-success: #E2FBE8;
|
--cal-bg-success: #e2fbe8;
|
||||||
--cal-bg-attention: #FCEED8;
|
--cal-bg-attention: #fceed8;
|
||||||
--cal-bg-error: #F9E3E2;
|
--cal-bg-error: #f9e3e2;
|
||||||
--cal-bg-dark-error: #752522;
|
--cal-bg-dark-error: #752522;
|
||||||
|
|
||||||
|
|
||||||
/* Borders */
|
/* Borders */
|
||||||
--cal-border-emphasis:#575757;
|
--cal-border-emphasis: #575757;
|
||||||
--cal-border: #444444;
|
--cal-border: #444444;
|
||||||
--cal-border-subtle:#2b2b2b;
|
--cal-border-subtle: #2b2b2b;
|
||||||
--cal-border-muted:#1c1c1c;
|
--cal-border-muted: #1c1c1c;
|
||||||
--cal-border-error: #aa2e26;
|
--cal-border-error: #aa2e26;
|
||||||
|
|
||||||
/* Content/Text */
|
/* Content/Text */
|
||||||
--cal-text-emphasis: #f3f4f6;
|
--cal-text-emphasis: #f3f4f6;
|
||||||
--cal-text:#d6d6d6;
|
--cal-text: #d6d6d6;
|
||||||
--cal-text-subtle:#767676;
|
--cal-text-subtle: #767676;
|
||||||
--cal-text-muted:#575757;
|
--cal-text-muted: #575757;
|
||||||
--cal-text-inverted:white;
|
--cal-text-inverted: white;
|
||||||
|
|
||||||
/* Content/Text -> components */
|
/* Content/Text -> components */
|
||||||
--cal-text-info:#253985;
|
--cal-text-info: #253985;
|
||||||
--cal-text-success:#285231;
|
--cal-text-success: #285231;
|
||||||
--cal-text-attention:#73321B;
|
--cal-text-attention: #73321b;
|
||||||
--cal-text-error:#752522;
|
--cal-text-error: #752522;
|
||||||
|
|
||||||
/* Brand shenanigans
|
/* Brand shenanigans
|
||||||
-> These will be computed for the users theme at runtime.
|
-> These will be computed for the users theme at runtime.
|
||||||
*/
|
*/
|
||||||
--cal-brand:#111827;
|
--cal-brand: #111827;
|
||||||
--cal-brand-emphasis:#101010;
|
--cal-brand-emphasis: #101010;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "@calcom/debugging",
|
"name": "@calcom/debugging",
|
||||||
"description": "Debugging utilities",
|
"description": "Debugging utilities",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"main": "./index.ts"
|
"main": "./index.ts"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,15 +1,14 @@
|
||||||
{
|
{
|
||||||
"extends": "@calcom/tsconfig/react-library.json",
|
"extends": "@calcom/tsconfig/react-library.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"resolveJsonModule": true
|
"resolveJsonModule": true
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"../../apps/web/next-env.d.ts",
|
"../../apps/web/next-env.d.ts",
|
||||||
"../types/*.d.ts",
|
"../types/*.d.ts",
|
||||||
"../types/next-auth.d.ts",
|
"../types/next-auth.d.ts",
|
||||||
"**/*.ts",
|
"**/*.ts",
|
||||||
"**/*.tsx"
|
"**/*.tsx"
|
||||||
],
|
],
|
||||||
"exclude": ["dist", "build", "node_modules"]
|
"exclude": ["dist", "build", "node_modules"]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
# Starts mailhog SMTP server on port 1025, web interface on port 8025
|
# Starts mailhog SMTP server on port 1025, web interface on port 8025
|
||||||
version: "3.6"
|
version: "3.6"
|
||||||
services:
|
services:
|
||||||
mailhog:
|
mailhog:
|
||||||
image: 'mailhog/mailhog:latest'
|
image: "mailhog/mailhog:latest"
|
||||||
ports:
|
ports:
|
||||||
- "1025:1025"
|
- "1025:1025"
|
||||||
- "8025:8025"
|
- "8025:8025"
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
.dark {
|
.dark {
|
||||||
background-color:rgb(16 16 16);
|
background-color: rgb(16 16 16);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -58,8 +58,8 @@
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
-webkit-animation: loader 2s infinite ease;
|
-webkit-animation: loader 2s infinite ease;
|
||||||
animation: loader 2s infinite ease;
|
animation: loader 2s infinite ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loader.modal-loader {
|
.loader.modal-loader {
|
||||||
margin: 60px auto;
|
margin: 60px auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Cal Sans';
|
font-family: "Cal Sans";
|
||||||
src: url("https://cal.com/cal.ttf");
|
src: url("https://cal.com/cal.ttf");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,11 +12,14 @@ h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: 'Cal Sans';
|
font-family: "Cal Sans";
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body, :host {
|
html,
|
||||||
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
|
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,38 +1,48 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||||
import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
|
|
||||||
|
import {
|
||||||
|
Examples,
|
||||||
|
Example,
|
||||||
|
Note,
|
||||||
|
Title,
|
||||||
|
VariantsTable,
|
||||||
|
VariantColumn,
|
||||||
|
RowTitles,
|
||||||
|
CustomArgsTable,
|
||||||
|
} from "@calcom/storybook/components";
|
||||||
import { Icon } from "@calcom/ui";
|
import { Icon } from "@calcom/ui";
|
||||||
|
|
||||||
import { EventDetails } from './Details';
|
import { EventDetails } from "./Details";
|
||||||
import { EventTitle } from './Title';
|
import { EventMembers } from "./Members";
|
||||||
import { EventMembers } from './Members';
|
import { EventTitle } from "./Title";
|
||||||
import { mockEvent } from './event.mock.ts';
|
import { mockEvent } from "./event.mock.ts";
|
||||||
|
|
||||||
<Meta title="Features/Events/Meta" component={EventDetails} />
|
<Meta title="Features/Events/Meta" component={EventDetails} />
|
||||||
|
|
||||||
<Title title="Event Meta" suffix="Brief" subtitle="Version 2.0 — Last Update: 12 Dec 2022"/>
|
<Title title="Event Meta" suffix="Brief" subtitle="Version 2.0 — Last Update: 12 Dec 2022" />
|
||||||
|
|
||||||
<Examples title="Combined event meta block">
|
<Examples title="Combined event meta block">
|
||||||
<div style={{maxWidth: 300}}>
|
<div style={{ maxWidth: 300 }}>
|
||||||
<Example title="Event Title">
|
<Example title="Event Title">
|
||||||
<EventTitle event={mockEvent}/>
|
<EventTitle event={mockEvent} />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Event Details">
|
<Example title="Event Details">
|
||||||
<EventDetails event={mockEvent}/>
|
<EventDetails event={mockEvent} />
|
||||||
</Example>
|
</Example>
|
||||||
</div>
|
</div>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="All variants">
|
<Story name="All variants">
|
||||||
<VariantsTable titles={['Event Meta Components']} columnMinWidth={150}>
|
<VariantsTable titles={["Event Meta Components"]} columnMinWidth={150}>
|
||||||
<VariantRow variant="">
|
<VariantRow variant="">
|
||||||
<div style={{maxWidth: 300}}>
|
<div style={{ maxWidth: 300 }}>
|
||||||
<EventMembers users={
|
<EventMembers
|
||||||
[
|
users={[
|
||||||
{name: "Pro example", username: "pro"},
|
{ name: "Pro example", username: "pro" },
|
||||||
{name: "Team example", username: "team"}
|
{ name: "Team example", username: "team" },
|
||||||
]
|
]}
|
||||||
} />
|
/>
|
||||||
<EventTitle>Quick catch-up</EventTitle>
|
<EventTitle>Quick catch-up</EventTitle>
|
||||||
<EventDetails event={mockEvent} />
|
<EventDetails event={mockEvent} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -55,30 +55,31 @@ export const Template = (args) => <Calendar {...args} />;
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="Onclick Handlers"
|
<Story
|
||||||
args={{
|
name="Onclick Handlers"
|
||||||
startHour: 8,
|
args={{
|
||||||
endHour: 17,
|
startHour: 8,
|
||||||
hoverEventDuration: 30,
|
endHour: 17,
|
||||||
}}
|
hoverEventDuration: 30,
|
||||||
argTypes={{
|
}}
|
||||||
startHour: {
|
argTypes={{
|
||||||
control: { type: "number", min: 0, max: 23, step: 1 },
|
startHour: {
|
||||||
},
|
control: { type: "number", min: 0, max: 23, step: 1 },
|
||||||
endHour: {
|
},
|
||||||
control: { type: "number", min: 0, max: 23, step: 1 },
|
endHour: {
|
||||||
},
|
control: { type: "number", min: 0, max: 23, step: 1 },
|
||||||
hoverEventDuration: {
|
},
|
||||||
control: { type: "number", min: 0, max: 60, step: 1 },
|
hoverEventDuration: {
|
||||||
},
|
control: { type: "number", min: 0, max: 60, step: 1 },
|
||||||
}}
|
},
|
||||||
>
|
}}>
|
||||||
{({...args}) => (
|
{({ ...args }) => (
|
||||||
<Calendar {...args}
|
<Calendar
|
||||||
events={events}
|
{...args}
|
||||||
onEventClick={(e) => alert(e.title)}
|
events={events}
|
||||||
onEmptyCellClick={(date) => alert(date.toString())}
|
onEventClick={(e) => alert(e.title)}
|
||||||
sortEvents
|
onEmptyCellClick={(date) => alert(date.toString())}
|
||||||
|
sortEvents
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Story>
|
</Story>
|
||||||
|
|
|
@ -1,18 +1,20 @@
|
||||||
.scheduler-wrapper {
|
.scheduler-wrapper {
|
||||||
--gridDefaultSize: 1.75rem;
|
--gridDefaultSize: 1.75rem;
|
||||||
--hoursInDay: 24;
|
--hoursInDay: 24;
|
||||||
--minuteInHour:60;
|
--minuteInHour: 60;
|
||||||
--gridMobileSize: 100vw;
|
--gridMobileSize: 100vw;
|
||||||
--calendar-offset-top: 28px;
|
--calendar-offset-top: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scheduler-grid-row-template{
|
.scheduler-grid-row-template {
|
||||||
grid-template-rows: var(--gridMobileSize) repeat(attr(data-gridstoperperday number), var(--gridMobileSize)) auto;
|
grid-template-rows: var(--gridMobileSize) repeat(attr(data-gridstoperperday number), var(--gridMobileSize)) auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
.scheduler-grid-row-template {
|
.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-calendarButton, .tremor-DateRangePicker-dropdownButton {
|
.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
|
@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 {
|
.tremor-DateRangePicker-calendarButtonText,
|
||||||
@apply text-default
|
.tremor-DateRangePicker-dropdownButtonText {
|
||||||
|
@apply text-default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tremor-DateRangePicker-calendarModal,.tremor-DateRangePicker-dropdownModal{
|
.tremor-DateRangePicker-calendarModal,
|
||||||
@apply dark:invert
|
.tremor-DateRangePicker-dropdownModal {
|
||||||
|
@apply dark:invert;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tremor-Card-root{
|
.tremor-Card-root {
|
||||||
@apply p-5
|
@apply p-5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tremor-TableCell-root{
|
.tremor-TableCell-root {
|
||||||
@apply pl-0
|
@apply pl-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recharts-responsive-container{
|
.recharts-responsive-container {
|
||||||
@apply -mx-4
|
@apply -mx-4;
|
||||||
}
|
}
|
||||||
.tremor-Card-root > p {
|
.tremor-Card-root > p {
|
||||||
@apply text-base font-semibold mb-2
|
@apply mb-2 text-base font-semibold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tremor-Legend-legendItem{
|
.tremor-Legend-legendItem {
|
||||||
@apply ml-2
|
@apply ml-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tremor-TableBody-root{
|
.tremor-TableBody-root {
|
||||||
@apply divide-subtle
|
@apply divide-subtle;
|
||||||
}
|
}
|
||||||
|
|
|
@ -243,7 +243,7 @@ const RemoveTimeButton = ({
|
||||||
const TimeRangeField = ({ className, value, onChange }: { className?: string } & ControllerRenderProps) => {
|
const TimeRangeField = ({ className, value, onChange }: { className?: string } & ControllerRenderProps) => {
|
||||||
// this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
|
// this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
|
||||||
return (
|
return (
|
||||||
<div className={classNames("flex flex-row gap-1",className)}>
|
<div className={classNames("flex flex-row gap-1", className)}>
|
||||||
<LazySelect
|
<LazySelect
|
||||||
className="inline-block w-[100px]"
|
className="inline-block w-[100px]"
|
||||||
value={value.start}
|
value={value.start}
|
||||||
|
|
|
@ -1,14 +1,17 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||||
import { Examples, Example, Note, Title,CustomArgsTable } from '@calcom/storybook/components'
|
|
||||||
import TokenHandler from './TokenHandler'
|
import { Examples, Example, Note, Title, CustomArgsTable } from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import TokenHandler from "./TokenHandler";
|
||||||
|
|
||||||
<Meta title="UI/TokenHandler" component={TokenHandler} />
|
<Meta title="UI/TokenHandler" component={TokenHandler} />
|
||||||
|
|
||||||
<Title title="TokenHandler" subtitle="Version 0.1"/>
|
<Title title="TokenHandler" subtitle="Version 0.1" />
|
||||||
|
|
||||||
## Structure
|
## Structure
|
||||||
|
|
||||||
<TokenHandler digits={[
|
<TokenHandler
|
||||||
|
digits={[
|
||||||
{
|
{
|
||||||
value: "1",
|
value: "1",
|
||||||
onChange: (e) => {},
|
onChange: (e) => {},
|
||||||
|
@ -33,6 +36,8 @@ import TokenHandler from './TokenHandler'
|
||||||
value: "6",
|
value: "6",
|
||||||
onChange: (e) => {},
|
onChange: (e) => {},
|
||||||
},
|
},
|
||||||
]} digitClassName="digit-input" />
|
]}
|
||||||
|
digitClassName="digit-input"
|
||||||
|
/>
|
||||||
|
|
||||||
#all the numbers should be visible while the first one is focused
|
#all the numbers should be visible while the first one is focused
|
||||||
|
|
|
@ -1,33 +1,57 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
|
Examples,
|
||||||
|
Example,
|
||||||
|
Note,
|
||||||
|
Title,
|
||||||
|
CustomArgsTable,
|
||||||
|
VariantsTable,
|
||||||
|
VariantRow,
|
||||||
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import { Alert } from "./Alert";
|
||||||
|
|
||||||
<Meta title="UI/Alert" component={Alert} />
|
<Meta title="UI/Alert" component={Alert} />
|
||||||
|
|
||||||
<Title title="Alert" suffix="Brief" subtitle="Version 2.0 — Last Update: 04 jan 2023"/>
|
<Title title="Alert" suffix="Brief" subtitle="Version 2.0 — Last Update: 04 jan 2023" />
|
||||||
|
|
||||||
## Definition
|
## Definition
|
||||||
|
|
||||||
Alerts provide time-based feedback to the user after taking an action.
|
Alerts provide time-based feedback to the user after taking an action.
|
||||||
|
|
||||||
## Structure
|
## Structure
|
||||||
|
|
||||||
Each alert has a state to represent neutral, positive or negative responses.
|
Each alert has a state to represent neutral, positive or negative responses.
|
||||||
|
|
||||||
<CustomArgsTable of={Alert} />
|
<CustomArgsTable of={Alert} />
|
||||||
|
|
||||||
<Examples title="Alert style">
|
<Examples title="Alert style">
|
||||||
<Example title="Error">
|
<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>
|
||||||
<Example title="Warning">
|
<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>
|
||||||
<Example title="With actions">
|
<Example title="With actions">
|
||||||
<Alert
|
<Alert
|
||||||
severity="warning"
|
severity="warning"
|
||||||
title="Summarise what happened"
|
title="Summarise what happened"
|
||||||
message="Describe what can be done about it here."
|
message="Describe what can be done about it here."
|
||||||
actions={<><button>Cancel me</button></>}
|
actions={
|
||||||
/>
|
<>
|
||||||
|
<button>Cancel me</button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
|
@ -37,31 +61,30 @@ Each alert has a state to represent neutral, positive or negative responses.
|
||||||
<Story
|
<Story
|
||||||
name="Alert"
|
name="Alert"
|
||||||
args={{
|
args={{
|
||||||
severity: 'success',
|
severity: "success",
|
||||||
title: 'Summarise what happened',
|
title: "Summarise what happened",
|
||||||
message: 'Describe what can be done about it here.',
|
message: "Describe what can be done about it here.",
|
||||||
}}
|
}}
|
||||||
argTypes={{
|
argTypes={{
|
||||||
severity: {
|
severity: {
|
||||||
control: {
|
control: {
|
||||||
type: 'inline-radio',
|
type: "inline-radio",
|
||||||
options: ['success', 'warning', 'error', 'neutral', 'info'],
|
options: ["success", "warning", "error", "neutral", "info"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
control: {
|
control: {
|
||||||
type: 'text'
|
type: "text",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
message: {
|
message: {
|
||||||
control: {
|
control: {
|
||||||
type: 'text'
|
type: "text",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
{({ severity, title, message }) => (
|
{({ severity, title, message }) => (
|
||||||
<VariantsTable titles={['Default']} columnMinWidth={150}>
|
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
||||||
<VariantRow variant={severity}>
|
<VariantRow variant={severity}>
|
||||||
<Alert severity={severity} title={title} message={message} />
|
<Alert severity={severity} title={title} message={message} />
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
|
|
|
@ -1,7 +1,17 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
import { _SBAppCategoryList } from './_storybookData';
|
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} />
|
<Meta title="UI/apps/Categories" component={Categories} />
|
||||||
|
|
||||||
|
|
|
@ -1,18 +1,28 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
import {AvatarGroup} from './AvatarGroup';
|
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} />
|
<Meta title="UI/Avatar" component={Avatar} />
|
||||||
|
|
||||||
<Title title="Avatar" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
|
<Title title="Avatar" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Definition
|
## Definition
|
||||||
|
|
||||||
An avatar group signals that there is more than 1 person associated with an item
|
An avatar group signals that there is more than 1 person associated with an item
|
||||||
|
|
||||||
## Structure
|
## Structure
|
||||||
|
|
||||||
Avatar group can be composed differently based on the number of user profile.
|
Avatar group can be composed differently based on the number of user profile.
|
||||||
|
|
||||||
<CustomArgsTable of={Avatar} />
|
<CustomArgsTable of={Avatar} />
|
||||||
|
@ -29,95 +39,102 @@ Avatar group can be composed differently based on the number of user profile.
|
||||||
<ArgsTable of={Avatar} />
|
<ArgsTable of={Avatar} />
|
||||||
|
|
||||||
### Avatar Group
|
### Avatar Group
|
||||||
|
|
||||||
<ArgsTable of={AvatarGroup} />
|
<ArgsTable of={AvatarGroup} />
|
||||||
<Examples title="Avatar Group ">
|
<Examples title="Avatar Group ">
|
||||||
<Example title="Small">
|
<Example title="Small">
|
||||||
<AvatarGroup size="sm" items={[
|
<AvatarGroup
|
||||||
{
|
size="sm"
|
||||||
image: "https://cal.com/stakeholder/peer.jpg",
|
items={[
|
||||||
alt: "Peer",
|
{
|
||||||
title: "Peer Richelsen",
|
image: "https://cal.com/stakeholder/peer.jpg",
|
||||||
},
|
alt: "Peer",
|
||||||
{
|
title: "Peer Richelsen",
|
||||||
image: "https://cal.com/stakeholder/bailey.jpg",
|
},
|
||||||
alt: "Bailey",
|
{
|
||||||
title: "Bailey Pumfleet",
|
image: "https://cal.com/stakeholder/bailey.jpg",
|
||||||
},
|
alt: "Bailey",
|
||||||
{
|
title: "Bailey Pumfleet",
|
||||||
image: "https://cal.com/stakeholder/alex-van-andel.jpg",
|
},
|
||||||
alt: "Alex",
|
{
|
||||||
title: "Alex Van Andel",
|
image: "https://cal.com/stakeholder/alex-van-andel.jpg",
|
||||||
},
|
alt: "Alex",
|
||||||
{
|
title: "Alex Van Andel",
|
||||||
image: "https://cal.com/stakeholder/ciaran.jpg",
|
},
|
||||||
alt: "Ciarán",
|
{
|
||||||
title: "Ciarán Hanrahan",
|
image: "https://cal.com/stakeholder/ciaran.jpg",
|
||||||
},
|
alt: "Ciarán",
|
||||||
{
|
title: "Ciarán Hanrahan",
|
||||||
image: "https://cal.com/stakeholder/peer.jpg",
|
},
|
||||||
alt: "Peer",
|
{
|
||||||
title: "Peer Richelsen",
|
image: "https://cal.com/stakeholder/peer.jpg",
|
||||||
},
|
alt: "Peer",
|
||||||
{
|
title: "Peer Richelsen",
|
||||||
image: "https://cal.com/stakeholder/bailey.jpg",
|
},
|
||||||
alt: "Bailey",
|
{
|
||||||
title: "Bailey Pumfleet",
|
image: "https://cal.com/stakeholder/bailey.jpg",
|
||||||
},
|
alt: "Bailey",
|
||||||
{
|
title: "Bailey Pumfleet",
|
||||||
image: "https://cal.com/stakeholder/alex-van-andel.jpg",
|
},
|
||||||
alt: "Alex",
|
{
|
||||||
title: "Alex Van Andel",
|
image: "https://cal.com/stakeholder/alex-van-andel.jpg",
|
||||||
},
|
alt: "Alex",
|
||||||
{
|
title: "Alex Van Andel",
|
||||||
image: "https://cal.com/stakeholder/ciaran.jpg",
|
},
|
||||||
alt: "Ciarán",
|
{
|
||||||
title: "Ciarán Hanrahan",
|
image: "https://cal.com/stakeholder/ciaran.jpg",
|
||||||
},
|
alt: "Ciarán",
|
||||||
]}/>
|
title: "Ciarán Hanrahan",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="large">
|
<Example title="large">
|
||||||
<AvatarGroup size="lg" items={[
|
<AvatarGroup
|
||||||
{
|
size="lg"
|
||||||
image: "https://cal.com/stakeholder/peer.jpg",
|
items={[
|
||||||
alt: "Peer",
|
{
|
||||||
title: "Peer Richelsen",
|
image: "https://cal.com/stakeholder/peer.jpg",
|
||||||
},
|
alt: "Peer",
|
||||||
{
|
title: "Peer Richelsen",
|
||||||
image: "https://cal.com/stakeholder/bailey.jpg",
|
},
|
||||||
alt: "Bailey",
|
{
|
||||||
title: "Bailey Pumfleet",
|
image: "https://cal.com/stakeholder/bailey.jpg",
|
||||||
},
|
alt: "Bailey",
|
||||||
{
|
title: "Bailey Pumfleet",
|
||||||
image: "https://cal.com/stakeholder/alex-van-andel.jpg",
|
},
|
||||||
alt: "Alex",
|
{
|
||||||
title: "Alex Van Andel",
|
image: "https://cal.com/stakeholder/alex-van-andel.jpg",
|
||||||
},
|
alt: "Alex",
|
||||||
{
|
title: "Alex Van Andel",
|
||||||
image: "https://cal.com/stakeholder/ciaran.jpg",
|
},
|
||||||
alt: "Ciarán",
|
{
|
||||||
title: "Ciarán Hanrahan",
|
image: "https://cal.com/stakeholder/ciaran.jpg",
|
||||||
},
|
alt: "Ciarán",
|
||||||
{
|
title: "Ciarán Hanrahan",
|
||||||
image: "https://cal.com/stakeholder/peer.jpg",
|
},
|
||||||
alt: "Peer",
|
{
|
||||||
title: "Peer Richelsen",
|
image: "https://cal.com/stakeholder/peer.jpg",
|
||||||
},
|
alt: "Peer",
|
||||||
{
|
title: "Peer Richelsen",
|
||||||
image: "https://cal.com/stakeholder/bailey.jpg",
|
},
|
||||||
alt: "Bailey",
|
{
|
||||||
title: "Bailey Pumfleet",
|
image: "https://cal.com/stakeholder/bailey.jpg",
|
||||||
},
|
alt: "Bailey",
|
||||||
{
|
title: "Bailey Pumfleet",
|
||||||
image: "https://cal.com/stakeholder/alex-van-andel.jpg",
|
},
|
||||||
alt: "Alex",
|
{
|
||||||
title: "Alex Van Andel",
|
image: "https://cal.com/stakeholder/alex-van-andel.jpg",
|
||||||
},
|
alt: "Alex",
|
||||||
{
|
title: "Alex Van Andel",
|
||||||
image: "https://cal.com/stakeholder/ciaran.jpg",
|
},
|
||||||
alt: "Ciarán",
|
{
|
||||||
title: "Ciarán Hanrahan",
|
image: "https://cal.com/stakeholder/ciaran.jpg",
|
||||||
},
|
alt: "Ciarán",
|
||||||
]}/>
|
title: "Ciarán Hanrahan",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
|
@ -127,27 +144,26 @@ Avatar group can be composed differently based on the number of user profile.
|
||||||
<Story
|
<Story
|
||||||
name="Avatar"
|
name="Avatar"
|
||||||
args={{
|
args={{
|
||||||
size: 'sm',
|
size: "sm",
|
||||||
alt: 'Avatar Story',
|
alt: "Avatar Story",
|
||||||
gravatarFallbackMd5: 'Ui@CAL.com',
|
gravatarFallbackMd5: "Ui@CAL.com",
|
||||||
}}
|
}}
|
||||||
argTypes={{
|
argTypes={{
|
||||||
size: {
|
size: {
|
||||||
control: {
|
control: {
|
||||||
type: 'inline-radio',
|
type: "inline-radio",
|
||||||
options: ['sm', 'lg'],
|
options: ["sm", "lg"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
alt: { control: 'text' },
|
alt: { control: "text" },
|
||||||
gravatarFallbackMd5: { control: 'text' },
|
gravatarFallbackMd5: { control: "text" },
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
{({ size, alt, gravatarFallbackMd5 }) => (
|
{({ size, alt, gravatarFallbackMd5 }) => (
|
||||||
<VariantsTable titles={['Default']} columnMinWidth={150}>
|
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
||||||
<VariantRow variant={size}>
|
<VariantRow variant={size}>
|
||||||
<Avatar size={size} alt={alt} gravatarFallbackMd5={gravatarFallbackMd5} />
|
<Avatar size={size} alt={alt} gravatarFallbackMd5={gravatarFallbackMd5} />
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
)}
|
)}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
|
@ -1,25 +1,35 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
import { Badge } from './Badge';
|
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} />
|
<Meta title="UI/Badge" component={Badge} />
|
||||||
|
|
||||||
<Title title="Bages" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
|
<Title title="Bages" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||||
|
|
||||||
|
|
||||||
## Definition
|
## 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.
|
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.
|
Status badge communicate status information. It is generally used within a container such as accordion and tables to label status for easy scanning.
|
||||||
|
|
||||||
## Structure
|
## Structure
|
||||||
|
|
||||||
<CustomArgsTable of={Badge} />
|
<CustomArgsTable of={Badge} />
|
||||||
|
|
||||||
|
|
||||||
<Examples title="Badge style">
|
<Examples title="Badge style">
|
||||||
<Example title="Gray">
|
<Example title="Gray">
|
||||||
<Badge variant="gray" >Badge text</Badge>
|
<Badge variant="gray">Badge text</Badge>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Green/Success">
|
<Example title="Green/Success">
|
||||||
<Badge variant="success">Badge text</Badge>
|
<Badge variant="success">Badge text</Badge>
|
||||||
|
@ -44,44 +54,46 @@ Status badge communicate status information. It is generally used within a cont
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
|
|
||||||
## Alert Badges
|
## Alert Badges
|
||||||
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
Alet badge is used in conjunction with an item, profile or label to indicate numeric value and messages assocciated with them.
|
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" />
|
<Title offset title="Badge" suffix="Variants" />
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="All Variants"
|
<Story
|
||||||
args={{
|
name="All Variants"
|
||||||
severity: 'default',
|
args={{
|
||||||
label: 'Badge text',
|
severity: "default",
|
||||||
}}
|
label: "Badge text",
|
||||||
argTypes={{
|
}}
|
||||||
severity: {
|
argTypes={{
|
||||||
control: {
|
severity: {
|
||||||
type: 'inline-radio',
|
control: {
|
||||||
options: ['default', 'success', 'gray', 'error'],
|
type: "inline-radio",
|
||||||
|
options: ["default", "success", "gray", "error"],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
label: {
|
||||||
label: {
|
control: {
|
||||||
control: {
|
type: "text",
|
||||||
type: 'text',
|
},
|
||||||
},
|
},
|
||||||
},
|
}}>
|
||||||
}}>
|
|
||||||
{({ severity, label }) => (
|
{({ severity, label }) => (
|
||||||
<VariantsTable titles={['Default','With Dot', 'With Icon']} columnMinWidth={150}>
|
<VariantsTable titles={["Default", "With Dot", "With Icon"]} columnMinWidth={150}>
|
||||||
<VariantRow variant={severity}>
|
<VariantRow variant={severity}>
|
||||||
<Badge variant={severity}>{label}</Badge>
|
<Badge variant={severity}>{label}</Badge>
|
||||||
<Badge variant={severity} withDot>{label}</Badge>
|
<Badge variant={severity} withDot>
|
||||||
<Badge variant={severity} startIcon={Plus}>{label}</Badge>
|
{label}
|
||||||
</VariantRow>
|
</Badge>
|
||||||
</VariantsTable>
|
<Badge variant={severity} startIcon={Plus}>
|
||||||
|
{label}
|
||||||
|
</Badge>
|
||||||
|
</VariantRow>
|
||||||
|
</VariantsTable>
|
||||||
)}
|
)}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
|
@ -1,19 +1,18 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||||
import { Examples, Example, Note, Title,CustomArgsTable } from '@calcom/storybook/components'
|
|
||||||
import { Breadcrumb } from './Breadcrumb';
|
import { Examples, Example, Note, Title, CustomArgsTable } from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import { Breadcrumb } from "./Breadcrumb";
|
||||||
|
|
||||||
<Meta title="UI/Breadcrumbs" component={Breadcrumb} />
|
<Meta title="UI/Breadcrumbs" component={Breadcrumb} />
|
||||||
|
|
||||||
<Title title="Breadcrumbs" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
|
<Title title="Breadcrumbs" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||||
|
|
||||||
|
|
||||||
## Structure
|
## Structure
|
||||||
|
|
||||||
<CustomArgsTable of={Breadcrumb} />
|
<CustomArgsTable of={Breadcrumb} />
|
||||||
|
|
||||||
|
<Examples title="Breadcrumb style">
|
||||||
<Examples title="Breadcrumb style"
|
|
||||||
>
|
|
||||||
<Example title="Primary">
|
<Example title="Primary">
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
||||||
|
@ -23,4 +22,5 @@ import { Breadcrumb } from './Breadcrumb';
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
## Usage
|
## 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.
|
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 {
|
import {
|
||||||
Examples,
|
Examples,
|
||||||
Example,
|
Example,
|
||||||
|
@ -8,31 +9,33 @@ import {
|
||||||
VariantColumn,
|
VariantColumn,
|
||||||
RowTitles,
|
RowTitles,
|
||||||
CustomArgsTable,
|
CustomArgsTable,
|
||||||
VariantRow
|
VariantRow,
|
||||||
} from "@calcom/storybook/components";
|
} 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} />
|
<Meta title="UI/Button" component={Button} />
|
||||||
|
|
||||||
<Title title="Buttons" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
|
<Title title="Buttons" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||||
|
|
||||||
|
|
||||||
## Definition
|
## 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.
|
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
|
## Structure
|
||||||
|
|
||||||
<CustomArgsTable of={Button} />
|
<CustomArgsTable of={Button} />
|
||||||
|
|
||||||
|
<Examples
|
||||||
<Examples title="Button style" footnote={
|
title="Button style"
|
||||||
<ul>
|
footnote={
|
||||||
<li>Primary: Signals most important actions at any given point in the application.</li>
|
<ul>
|
||||||
<li>Secondary: Gives visual weight to actions that are important</li>
|
<li>Primary: Signals most important actions at any given point in the application.</li>
|
||||||
<li>Minimal: Used for actions that we want to give very little significane to</li>
|
<li>Secondary: Gives visual weight to actions that are important</li>
|
||||||
</ul>
|
<li>Minimal: Used for actions that we want to give very little significane to</li>
|
||||||
}>
|
</ul>
|
||||||
|
}>
|
||||||
<Example title="Primary">
|
<Example title="Primary">
|
||||||
<Button className="sb-fake-pseudo--focus">Button text</Button>
|
<Button className="sb-fake-pseudo--focus">Button text</Button>
|
||||||
</Example>
|
</Example>
|
||||||
|
@ -49,7 +52,7 @@ Button are clickable elements that initiates user actions. Labels in the button
|
||||||
<Button>Button text</Button>
|
<Button>Button text</Button>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Hover">
|
<Example title="Hover">
|
||||||
<Button className="sb-pseudo--hover">Button text</Button>
|
<Button className="sb-pseudo--hover">Button text</Button>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Focus">
|
<Example title="Focus">
|
||||||
<Button className="sb-pseudo--focus">Button text</Button>
|
<Button className="sb-pseudo--focus">Button text</Button>
|
||||||
|
@ -67,7 +70,7 @@ Button are clickable elements that initiates user actions. Labels in the button
|
||||||
<Button>Button text</Button>
|
<Button>Button text</Button>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Icon left">
|
<Example title="Icon left">
|
||||||
<Button StartIcon={Plus}>Button text</Button>
|
<Button StartIcon={Plus}>Button text</Button>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Icon right">
|
<Example title="Icon right">
|
||||||
<Button EndIcon={Plus}>Button text</Button>
|
<Button EndIcon={Plus}>Button text</Button>
|
||||||
|
@ -76,30 +79,34 @@ Button are clickable elements that initiates user actions. Labels in the button
|
||||||
|
|
||||||
<Examples title="Icons">
|
<Examples title="Icons">
|
||||||
<Example title="Icon Normal">
|
<Example title="Icon Normal">
|
||||||
<Button StartIcon={X} variant="icon" size="base" color="minimal"></Button>
|
<Button StartIcon={X} variant="icon" size="base" color="minimal"></Button>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Icon Small">
|
<Example title="Icon Small">
|
||||||
<Button StartIcon={X} variant="icon" size="sm" color="minimal"></Button>
|
<Button StartIcon={X} variant="icon" size="sm" color="minimal"></Button>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Icon Loading">
|
<Example title="Icon Loading">
|
||||||
<Button StartIcon={X} variant="icon" size="sm" color="minimal" loading></Button>
|
<Button StartIcon={X} variant="icon" size="sm" color="minimal" loading></Button>
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
## Anatomy
|
## 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.
|
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
|
## Usage
|
||||||
|
|
||||||
<Note>In general, there should be only one Primary button in any application context</Note>
|
<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>
|
<Note>Hover state variant for Mobile button is an option for assistive device.</Note>
|
||||||
|
|
||||||
<Title offset title="Buttons" suffix="Variants" />
|
<Title offset title="Buttons" suffix="Variants" />
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="All variants">
|
<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">
|
<VariantRow variant="Default">
|
||||||
<Button>Button text</Button>
|
<Button>Button text</Button>
|
||||||
<Button color="secondary">Button text</Button>
|
<Button color="secondary">Button text</Button>
|
||||||
|
@ -109,94 +116,117 @@ Button are clickable elements that initiates user actions. Labels in the button
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
<VariantRow variant="Hover">
|
<VariantRow variant="Hover">
|
||||||
<Button className="sb-pseudo--hover">Button text</Button>
|
<Button className="sb-pseudo--hover">Button text</Button>
|
||||||
<Button className="sb-pseudo--hover" color="secondary">Button text</Button>
|
<Button className="sb-pseudo--hover" color="secondary">
|
||||||
<Button className="sb-pseudo--hover" color="minimal">Button text</Button>
|
Button text
|
||||||
<Button className="sb-pseudo--hover" color="destructive">Button text</Button>
|
</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>
|
<Button className="sb-pseudo--hover" color="destructive" variant="icon" StartIcon={X}></Button>
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
<VariantRow variant="Focus">
|
<VariantRow variant="Focus">
|
||||||
<Button className="sb-pseudo--focus">Button text</Button>
|
<Button className="sb-pseudo--focus">Button text</Button>
|
||||||
<Button className="sb-pseudo--focus" color="secondary">Button text</Button>
|
<Button className="sb-pseudo--focus" color="secondary">
|
||||||
<Button className="sb-pseudo--focus" color="minimal">Button text</Button>
|
Button text
|
||||||
<Button className="sb-pseudo--focus" color="destructive">Button text</Button>
|
</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>
|
<Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon={X}></Button>
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
<VariantRow variant="Loading">
|
<VariantRow variant="Loading">
|
||||||
<Button loading>Button text</Button>
|
<Button loading>Button text</Button>
|
||||||
<Button loading color="secondary">Button text</Button>
|
<Button loading color="secondary">
|
||||||
<Button loading color="minimal">Button text</Button>
|
Button text
|
||||||
<Button loading color="destructive">Button text</Button>
|
</Button>
|
||||||
|
<Button loading color="minimal">
|
||||||
|
Button text
|
||||||
|
</Button>
|
||||||
|
<Button loading color="destructive">
|
||||||
|
Button text
|
||||||
|
</Button>
|
||||||
<Button loading color="destructive" variant="icon" StartIcon={X}></Button>
|
<Button loading color="destructive" variant="icon" StartIcon={X}></Button>
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
<VariantRow variant="Disabled">
|
<VariantRow variant="Disabled">
|
||||||
<Button disabled>Button text</Button>
|
<Button disabled>Button text</Button>
|
||||||
<Button disabled color="secondary">Button text</Button>
|
<Button disabled color="secondary">
|
||||||
<Button disabled color="minimal">Button text</Button>
|
Button text
|
||||||
<Button disabled color="destructive">Button text</Button>
|
</Button>
|
||||||
|
<Button disabled color="minimal">
|
||||||
|
Button text
|
||||||
|
</Button>
|
||||||
|
<Button disabled color="destructive">
|
||||||
|
Button text
|
||||||
|
</Button>
|
||||||
<Button disabled color="minimal" variant="icon" StartIcon={X}></Button>
|
<Button disabled color="minimal" variant="icon" StartIcon={X}></Button>
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
</Story>
|
</Story>
|
||||||
<Story name="Button Playground"
|
<Story
|
||||||
args={{
|
name="Button Playground"
|
||||||
color: 'primary',
|
args={{
|
||||||
size: 'base',
|
color: "primary",
|
||||||
loading: false,
|
size: "base",
|
||||||
disabled: false,
|
loading: false,
|
||||||
children: 'Button text',
|
disabled: false,
|
||||||
className: ''
|
children: "Button text",
|
||||||
}}
|
className: "",
|
||||||
argTypes={{
|
}}
|
||||||
color: {
|
argTypes={{
|
||||||
control: {
|
color: {
|
||||||
type: 'inline-radio',
|
control: {
|
||||||
options: ['primary', 'secondary', 'minimal', 'destructive']
|
type: "inline-radio",
|
||||||
}
|
options: ["primary", "secondary", "minimal", "destructive"],
|
||||||
},
|
},
|
||||||
size: {
|
},
|
||||||
control: {
|
size: {
|
||||||
type: 'inline-radio',
|
control: {
|
||||||
options: ['base', 'sm']
|
type: "inline-radio",
|
||||||
}
|
options: ["base", "sm"],
|
||||||
},
|
},
|
||||||
loading: {
|
},
|
||||||
control: {
|
loading: {
|
||||||
type: 'boolean'
|
control: {
|
||||||
}
|
type: "boolean",
|
||||||
},
|
},
|
||||||
disabled: {
|
},
|
||||||
control: {
|
disabled: {
|
||||||
type: 'boolean'
|
control: {
|
||||||
}
|
type: "boolean",
|
||||||
},
|
},
|
||||||
children: {
|
},
|
||||||
control: {
|
children: {
|
||||||
type: 'text'
|
control: {
|
||||||
}
|
type: "text",
|
||||||
},
|
},
|
||||||
className: {
|
},
|
||||||
control: {
|
className: {
|
||||||
type: 'inline-radio',
|
control: {
|
||||||
options: ['', 'sb-pseudo--hover', 'sb-pseudo--focus']
|
type: "inline-radio",
|
||||||
}
|
options: ["", "sb-pseudo--hover", "sb-pseudo--focus"],
|
||||||
}
|
},
|
||||||
}}
|
},
|
||||||
>
|
}}>
|
||||||
{({ color, size, loading, disabled, children, className }) => (
|
{({ color, size, loading, disabled, children, className }) => (
|
||||||
<VariantsTable titles={["Light & Dark Modes"]} columnMinWidth={150}>
|
<VariantsTable titles={["Light & Dark Modes"]} columnMinWidth={150}>
|
||||||
<VariantRow variant="Button">
|
<VariantRow variant="Button">
|
||||||
<Button
|
<Button
|
||||||
color={color}
|
color={color}
|
||||||
size={size}
|
size={size}
|
||||||
variant="default"
|
variant="default"
|
||||||
loading={loading}
|
loading={loading}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
className={className}
|
className={className}>
|
||||||
>
|
{children}
|
||||||
{children}
|
</Button>
|
||||||
</Button>
|
</VariantRow>
|
||||||
</VariantRow>
|
</VariantsTable>
|
||||||
</VariantsTable>
|
|
||||||
)}
|
)}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
|
@ -1,34 +1,43 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
import { ButtonGroup} from './ButtonGroup';
|
Examples,
|
||||||
import { Button} from '../button/Button';
|
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} />
|
<Meta title="UI/Button Group" component={ButtonGroup} />
|
||||||
|
|
||||||
<Title title="Button Group" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
|
<Title title="Button Group" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||||
|
|
||||||
## Definition
|
## Definition
|
||||||
|
|
||||||
Button group enables multiple buttons to be combined into a single unit. It offers users access to frequently performed, related actions.
|
Button group enables multiple buttons to be combined into a single unit. It offers users access to frequently performed, related actions.
|
||||||
|
|
||||||
## Structure
|
## Structure
|
||||||
|
|
||||||
<CustomArgsTable of={ButtonGroup} />
|
<CustomArgsTable of={ButtonGroup} />
|
||||||
|
|
||||||
|
<Examples
|
||||||
<Examples title="Breadcrumb style"
|
title="Breadcrumb style"
|
||||||
footNote ={
|
footNote={
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
Seperated: In general, seperated button group style can be included in container such as card, modal, and page.
|
Seperated: In general, seperated button group style can be included in container such as card, modal,
|
||||||
</li>
|
and page.
|
||||||
<li>
|
|
||||||
Combined: Combined button group can be used standalone e.g. mini toggles for calendars
|
|
||||||
</li>
|
</li>
|
||||||
|
<li>Combined: Combined button group can be used standalone e.g. mini toggles for calendars</li>
|
||||||
</ul>
|
</ul>
|
||||||
}
|
}>
|
||||||
>
|
<Example title="Default">
|
||||||
<Example title="Default" >
|
|
||||||
<ButtonGroup>
|
<ButtonGroup>
|
||||||
<Button StartIcon={Trash} variant="icon" color="secondary" />
|
<Button StartIcon={Trash} variant="icon" color="secondary" />
|
||||||
<Button StartIcon={Navigation} variant="icon" color="secondary" />
|
<Button StartIcon={Navigation} variant="icon" color="secondary" />
|
||||||
|
@ -44,16 +53,14 @@ Button group enables multiple buttons to be combined into a single unit. It offe
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story
|
<Story name="All Variants">
|
||||||
name="All Variants">
|
<VariantsTable titles={["Default", "Secondary", "Minimal"]} columnMinWidth={150}>
|
||||||
<VariantsTable titles={["Default",'Secondary',"Minimal"]} columnMinWidth={150}>
|
|
||||||
<VariantRow variant="Default">
|
<VariantRow variant="Default">
|
||||||
<ButtonGroup>
|
<ButtonGroup>
|
||||||
<Button StartIcon={Trash} variant="icon" />
|
<Button StartIcon={Trash} variant="icon" />
|
||||||
<Button StartIcon={Navigation} variant="icon"/>
|
<Button StartIcon={Navigation} variant="icon" />
|
||||||
<Button StartIcon={Clipboard} variant="icon" />
|
<Button StartIcon={Clipboard} variant="icon" />
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
<ButtonGroup>
|
<ButtonGroup>
|
||||||
<Button StartIcon={Trash} variant="icon" color="secondary" />
|
<Button StartIcon={Trash} variant="icon" color="secondary" />
|
||||||
|
@ -68,14 +75,14 @@ Button group enables multiple buttons to be combined into a single unit. It offe
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
<VariantRow variant="Combined">
|
<VariantRow variant="Combined">
|
||||||
<ButtonGroup combined>
|
<ButtonGroup combined>
|
||||||
<Button StartIcon={Trash} variant="icon" />
|
<Button StartIcon={Trash} variant="icon" />
|
||||||
<Button StartIcon={Navigation} variant="icon" />
|
<Button StartIcon={Navigation} variant="icon" />
|
||||||
<Button StartIcon={Clipboard} variant="icon" />
|
<Button StartIcon={Clipboard} variant="icon" />
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
<ButtonGroup combined>
|
<ButtonGroup combined>
|
||||||
<Button StartIcon={Trash} variant="icon" color="secondary" />
|
<Button StartIcon={Trash} variant="icon" color="secondary" />
|
||||||
<Button StartIcon={Navigation} variant="icon" color="secondary" />
|
<Button StartIcon={Navigation} variant="icon" color="secondary" />
|
||||||
<Button StartIcon={Clipboard} variant="icon" color="secondary" />
|
<Button StartIcon={Clipboard} variant="icon" color="secondary" />
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
|
@ -86,30 +93,29 @@ Button group enables multiple buttons to be combined into a single unit. It offe
|
||||||
<Story
|
<Story
|
||||||
name="ButtonGroup Playground"
|
name="ButtonGroup Playground"
|
||||||
args={{
|
args={{
|
||||||
color: 'secondary',
|
color: "secondary",
|
||||||
combined: false,
|
combined: false,
|
||||||
}}
|
}}
|
||||||
argTypes={{
|
argTypes={{
|
||||||
color: {
|
color: {
|
||||||
control: {
|
control: {
|
||||||
type: 'select',
|
type: "select",
|
||||||
options: ['primary', 'secondary', 'minimal'],
|
options: ["primary", "secondary", "minimal"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
combined: {
|
combined: {
|
||||||
control: {
|
control: {
|
||||||
type: 'boolean',
|
type: "boolean",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
{({ color, combined }) => (
|
{({ color, combined }) => (
|
||||||
<VariantsTable titles={[`${color}`]} columnMinWidth={150}>
|
<VariantsTable titles={[`${color}`]} columnMinWidth={150}>
|
||||||
<VariantRow variant="">
|
<VariantRow variant="">
|
||||||
<ButtonGroup combined={combined}>
|
<ButtonGroup combined={combined}>
|
||||||
<Button StartIcon={Trash} variant="icon" color={color} />
|
<Button StartIcon={Trash} variant="icon" color={color} />
|
||||||
<Button StartIcon={Navigation} variant="icon" color={color}/>
|
<Button StartIcon={Navigation} variant="icon" color={color} />
|
||||||
<Button StartIcon={Clipboard} variant="icon" color={color}/>
|
<Button StartIcon={Clipboard} variant="icon" color={color} />
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
|
|
|
@ -1,46 +1,57 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
|
Examples,
|
||||||
|
Example,
|
||||||
|
Note,
|
||||||
|
Title,
|
||||||
|
CustomArgsTable,
|
||||||
|
VariantsTable,
|
||||||
|
VariantRow,
|
||||||
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import Card from "./Card";
|
||||||
|
|
||||||
<Meta title="UI/Card" component={Card} />
|
<Meta title="UI/Card" component={Card} />
|
||||||
|
|
||||||
<Title title="Card" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023"/>
|
<Title title="Card" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
|
||||||
|
|
||||||
## Definition
|
## Definition
|
||||||
|
|
||||||
All Cards used in Cal.com
|
All Cards used in Cal.com
|
||||||
|
|
||||||
<CustomArgsTable of={Card} />
|
<CustomArgsTable of={Card} />
|
||||||
|
|
||||||
export const tip = {
|
export const tip = {
|
||||||
id: 1,
|
id: 1,
|
||||||
thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
|
thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
|
||||||
mediaLink: "https://go.cal.com/dynamic-video",
|
mediaLink: "https://go.cal.com/dynamic-video",
|
||||||
title: "Dynamic booking links",
|
title: "Dynamic booking links",
|
||||||
description: "Booking link that allows people to quickly schedule meetings.",
|
description: "Booking link that allows people to quickly schedule meetings.",
|
||||||
href: "https://cal.com/blog/cal-v-1-9",
|
href: "https://cal.com/blog/cal-v-1-9",
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="Card"
|
<Story
|
||||||
args={{
|
name="Card"
|
||||||
thumbnailUrl: tip.thumbnailUrl,
|
args={{
|
||||||
mediaLink: tip.mediaLink,
|
thumbnailUrl: tip.thumbnailUrl,
|
||||||
title: tip.title,
|
mediaLink: tip.mediaLink,
|
||||||
description: tip.description,
|
title: tip.title,
|
||||||
learnMoreHref: tip.href,
|
description: tip.description,
|
||||||
learnMoreText: "learn more",
|
learnMoreHref: tip.href,
|
||||||
}}
|
learnMoreText: "learn more",
|
||||||
argTypes={{
|
}}
|
||||||
thumbnailUrl: { control: { type: 'text' } },
|
argTypes={{
|
||||||
mediaLink: { control: { type: 'text' } },
|
thumbnailUrl: { control: { type: "text" } },
|
||||||
title: { control: { type: 'text' } },
|
mediaLink: { control: { type: "text" } },
|
||||||
description: { control: { type: 'text' } },
|
title: { control: { type: "text" } },
|
||||||
learnMoreHref: { control: { type: 'text' } },
|
description: { control: { type: "text" } },
|
||||||
learnMoreText: { control: { type: 'text' } },
|
learnMoreHref: { control: { type: "text" } },
|
||||||
}}>
|
learnMoreText: { control: { type: "text" } },
|
||||||
|
}}>
|
||||||
{({ thumbnailUrl, mediaLink, title, description, learnMoreText }) => (
|
{({ thumbnailUrl, mediaLink, title, description, learnMoreText }) => (
|
||||||
<VariantsTable titles={['']} columnMinWidth={150}>
|
<VariantsTable titles={[""]} columnMinWidth={150}>
|
||||||
<VariantRow variant="Sidebar Card">
|
<VariantRow variant="Sidebar Card">
|
||||||
<Card
|
<Card
|
||||||
variant="SidebarCard"
|
variant="SidebarCard"
|
||||||
|
|
|
@ -1,17 +1,27 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
|
Examples,
|
||||||
|
Example,
|
||||||
|
Note,
|
||||||
|
Title,
|
||||||
|
CustomArgsTable,
|
||||||
|
VariantsTable,
|
||||||
|
VariantRow,
|
||||||
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import Credits from "./Credits";
|
||||||
|
|
||||||
<Meta title="UI/Credits" component={Credits} />
|
<Meta title="UI/Credits" component={Credits} />
|
||||||
|
|
||||||
<Title title="Credits" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023"/>
|
<Title title="Credits" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
|
||||||
|
|
||||||
## Definition
|
## Definition
|
||||||
|
|
||||||
Shows the current copy right as well as app version name.
|
Shows the current copy right as well as app version name.
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story
|
<Story name="Credits">
|
||||||
name="Credits">
|
|
||||||
<VariantsTable titles={[]} columnMinWidth={150}>
|
<VariantsTable titles={[]} columnMinWidth={150}>
|
||||||
<VariantRow variant="Default">
|
<VariantRow variant="Default">
|
||||||
<Credits />
|
<Credits />
|
||||||
|
|
|
@ -12,7 +12,7 @@ import {
|
||||||
|
|
||||||
import { DataTable } from "../";
|
import { DataTable } from "../";
|
||||||
import { columns, filterableItems } from "./columns";
|
import { columns, filterableItems } from "./columns";
|
||||||
import { dataTableDemousers,dataTableSelectionActions } from "./data";
|
import { dataTableDemousers, dataTableSelectionActions } from "./data";
|
||||||
|
|
||||||
<Meta title="UI/table/data-table" component={DataTable} />
|
<Meta title="UI/table/data-table" component={DataTable} />
|
||||||
|
|
||||||
|
@ -22,6 +22,12 @@ import { dataTableDemousers,dataTableSelectionActions } from "./data";
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="Datatable">
|
<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>
|
</Story>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
|
@ -1,17 +1,27 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
|
Examples,
|
||||||
|
Example,
|
||||||
|
Note,
|
||||||
|
Title,
|
||||||
|
CustomArgsTable,
|
||||||
|
VariantsTable,
|
||||||
|
VariantRow,
|
||||||
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import { Divider, VerticalDivider } from "./Divider";
|
||||||
|
|
||||||
<Meta title="UI/Divider" component={Divider} />
|
<Meta title="UI/Divider" component={Divider} />
|
||||||
|
|
||||||
<Title title="Divider" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023"/>
|
<Title title="Divider" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
|
||||||
|
|
||||||
## Definition
|
## Definition
|
||||||
|
|
||||||
Shows the current copy right as well as app version name.
|
Shows the current copy right as well as app version name.
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story
|
<Story name="Divider">
|
||||||
name="Divider">
|
|
||||||
<VariantsTable titles={[]} columnMinWidth={150}>
|
<VariantsTable titles={[]} columnMinWidth={150}>
|
||||||
<VariantRow variant="Horizontal">
|
<VariantRow variant="Horizontal">
|
||||||
<div className="dark:text-inverted">
|
<div className="dark:text-inverted">
|
||||||
|
@ -21,7 +31,7 @@ Shows the current copy right as well as app version name.
|
||||||
</div>
|
</div>
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
<VariantRow variant="Vertical">
|
<VariantRow variant="Vertical">
|
||||||
<div className="flex dark:text-inverted">
|
<div className="dark:text-inverted flex">
|
||||||
Text left
|
Text left
|
||||||
<VerticalDivider />
|
<VerticalDivider />
|
||||||
Text right
|
Text right
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
.editor a {
|
.editor a {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -10,11 +9,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor ul {
|
.editor ul {
|
||||||
list-style: disc inside
|
list-style: disc inside;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor ol {
|
.editor ol {
|
||||||
list-style: decimal inside
|
list-style: decimal inside;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-container {
|
.editor-container {
|
||||||
|
@ -46,7 +45,7 @@
|
||||||
tab-size: 1;
|
tab-size: 1;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
padding: 10px 10px;
|
padding: 10px 10px;
|
||||||
outline: none
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-text-bold {
|
.editor-text-bold {
|
||||||
|
@ -69,7 +68,7 @@
|
||||||
.editor-paragraph {
|
.editor-paragraph {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
color: var(--cal-text)
|
color: var(--cal-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-paragraph:last-child {
|
.editor-paragraph:last-child {
|
||||||
|
@ -83,28 +82,26 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.editor-heading-h2 {
|
.editor-heading-h2 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-list-ul {
|
.editor-list-ul {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-list-ol {
|
.editor-list-ol {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.editor-listitem {
|
.editor-listitem {
|
||||||
margin: 0px 32px;
|
margin: 0px 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-nested-listitem {
|
.editor-nested-listitem {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre::-webkit-scrollbar {
|
pre::-webkit-scrollbar {
|
||||||
|
@ -144,7 +141,7 @@ pre::-webkit-scrollbar-thumb {
|
||||||
|
|
||||||
.toolbar button.toolbar-item.active {
|
.toolbar button.toolbar-item.active {
|
||||||
background-color: var(--cal-bg-inverted);
|
background-color: var(--cal-bg-inverted);
|
||||||
color: var(--cal-text-inverted)
|
color: var(--cal-text-inverted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar button.toolbar-item.active i {
|
.toolbar button.toolbar-item.active i {
|
||||||
|
@ -353,7 +350,8 @@ pre::-webkit-scrollbar-thumb {
|
||||||
vertical-align: -0.25em;
|
vertical-align: -0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
i, .icon {
|
i,
|
||||||
|
.icon {
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,13 +1,24 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||||
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
|
||||||
|
import {
|
||||||
|
Examples,
|
||||||
|
Example,
|
||||||
|
Note,
|
||||||
|
Title,
|
||||||
|
CustomArgsTable,
|
||||||
|
VariantsTable,
|
||||||
|
VariantRow,
|
||||||
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
import { Calendar } from "../icon";
|
import { Calendar } from "../icon";
|
||||||
import { EmptyScreen } from './EmptyScreen';
|
import { EmptyScreen } from "./EmptyScreen";
|
||||||
|
|
||||||
<Meta title="UI/EmptyScreen" component={EmptyScreen} />
|
<Meta title="UI/EmptyScreen" component={EmptyScreen} />
|
||||||
|
|
||||||
<Title title="EmptyScreen" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023"/>
|
<Title title="EmptyScreen" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
|
||||||
|
|
||||||
## Definition
|
## 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.
|
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.
|
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
|
<Story
|
||||||
name="EmptyScreen"
|
name="EmptyScreen"
|
||||||
args={{
|
args={{
|
||||||
headline: 'Empty state header',
|
headline: "Empty state header",
|
||||||
description: 'Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo.',
|
description:
|
||||||
buttonText: 'Learn More',
|
"Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo.",
|
||||||
|
buttonText: "Learn More",
|
||||||
}}
|
}}
|
||||||
argTypes={{
|
argTypes={{
|
||||||
headline: {
|
headline: {
|
||||||
control: 'text',
|
control: "text",
|
||||||
},
|
},
|
||||||
description: {
|
description: {
|
||||||
control: 'text',
|
control: "text",
|
||||||
},
|
},
|
||||||
buttonText: {
|
buttonText: {
|
||||||
control: 'text',
|
control: "text",
|
||||||
},
|
},
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
{({ headline, description, buttonText }) => (
|
{({ headline, description, buttonText }) => (
|
||||||
<VariantsTable titles={[]} columnMinWidth={150}>
|
<VariantsTable titles={[]} columnMinWidth={150}>
|
||||||
<VariantRow variant="Default">
|
<VariantRow variant="Default">
|
||||||
|
|
|
@ -1,89 +1,99 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
|
Examples,
|
||||||
|
Example,
|
||||||
|
Note,
|
||||||
|
Title,
|
||||||
|
CustomArgsTable,
|
||||||
|
VariantsTable,
|
||||||
|
VariantRow,
|
||||||
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import { CheckboxField as Checkbox } from "./Checkbox";
|
||||||
|
|
||||||
<Meta title="UI/Form/Checkbox" component={Checkbox} />
|
<Meta title="UI/Form/Checkbox" component={Checkbox} />
|
||||||
|
|
||||||
<Title title="Checkbox " suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
|
<Title title="Checkbox " suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||||
|
|
||||||
## Definition
|
## 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
|
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
|
## Structure
|
||||||
|
|
||||||
<CustomArgsTable of={Checkbox} />
|
<CustomArgsTable of={Checkbox} />
|
||||||
|
|
||||||
|
|
||||||
<Examples title="Checkbox style">
|
<Examples title="Checkbox style">
|
||||||
<Example title="Default" >
|
<Example title="Default">
|
||||||
<Checkbox label="Default" />
|
<Checkbox label="Default" />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Error" >
|
<Example title="Error">
|
||||||
<Checkbox label="Error" error/>
|
<Checkbox label="Error" error />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Disabled" >
|
<Example title="Disabled">
|
||||||
<Checkbox label="Disabled" disabled/>
|
<Checkbox label="Disabled" disabled />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Disabled" >
|
<Example title="Disabled">
|
||||||
<Checkbox label="Disabled Checked" checked disabled />
|
<Checkbox label="Disabled Checked" checked disabled />
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
<Examples title="Description As Label">
|
<Examples title="Description As Label">
|
||||||
<Example title="Default" >
|
<Example title="Default">
|
||||||
<Checkbox descriptionAsLabel description="Default Description" />
|
<Checkbox descriptionAsLabel description="Default Description" />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Error" >
|
<Example title="Error">
|
||||||
<Checkbox descriptionAsLabel description="Default Description" error/>
|
<Checkbox descriptionAsLabel description="Default Description" error />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Disabled" >
|
<Example title="Disabled">
|
||||||
<Checkbox descriptionAsLabel description="Default Description" disabled/>
|
<Checkbox descriptionAsLabel description="Default Description" disabled />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Disabled" >
|
<Example title="Disabled">
|
||||||
<Checkbox descriptionAsLabel description="Default Description" disabled checked/>
|
<Checkbox descriptionAsLabel description="Default Description" disabled checked />
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="Checkbox"
|
<Story
|
||||||
|
name="Checkbox"
|
||||||
args={{
|
args={{
|
||||||
label: "Default",
|
label: "Default",
|
||||||
description: "Default Description",
|
description: "Default Description",
|
||||||
error: false,
|
error: false,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
}}
|
}}
|
||||||
argTypes={{
|
argTypes={{
|
||||||
label: {
|
label: {
|
||||||
control: {
|
control: {
|
||||||
type: 'text',
|
type: "text",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
description: {
|
description: {
|
||||||
control: {
|
control: {
|
||||||
type: 'text',
|
type: "text",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
control: {
|
control: {
|
||||||
type: 'boolean',
|
type: "boolean",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
control: {
|
control: {
|
||||||
type: 'boolean',
|
type: "boolean",
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
{({ label, description, error, disabled }) => (
|
{({ label, description, error, disabled }) => (
|
||||||
<VariantsTable titles={[""]} columnMinWidth={150}>
|
<VariantsTable titles={[""]} columnMinWidth={150}>
|
||||||
<VariantRow variant="Default">
|
<VariantRow variant="Default">
|
||||||
<Checkbox label={label} error={error} disabled={disabled} />
|
<Checkbox label={label} error={error} disabled={disabled} />
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
<VariantRow variant="Description As Label">
|
<VariantRow variant="Description As Label">
|
||||||
<Checkbox description={description} error={error} disabled={disabled} descriptionAsLabel/>
|
<Checkbox description={description} error={error} disabled={disabled} descriptionAsLabel />
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
)}
|
)}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
|
@ -1,52 +1,67 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {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} />
|
<Meta title="UI/Form/Input Field" component={InputField} />
|
||||||
|
|
||||||
<Title title="Inputs" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
|
<Title title="Inputs" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||||
|
|
||||||
## Definition
|
## 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
|
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
|
## Structure
|
||||||
|
|
||||||
<CustomArgsTable of={InputField} />
|
<CustomArgsTable of={InputField} />
|
||||||
|
|
||||||
|
<Examples
|
||||||
<Examples title="Inputs" footnote={
|
title="Inputs"
|
||||||
<ul>
|
footnote={
|
||||||
<li>The width is flexible but the height is fixed for both desktop and mobile. </li>
|
<ul>
|
||||||
</ul>
|
<li>The width is flexible but the height is fixed for both desktop and mobile. </li>
|
||||||
}>
|
</ul>
|
||||||
|
}>
|
||||||
<Example title="Default">
|
<Example title="Default">
|
||||||
<InputField placeholder="Default"/>
|
<InputField placeholder="Default" />
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
<Examples title="Input Types">
|
<Examples title="Input Types">
|
||||||
<Example title="Default">
|
<Example title="Default">
|
||||||
<InputField placeholder="Default"/>
|
<InputField placeholder="Default" />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Prefix">
|
<Example title="Prefix">
|
||||||
<InputField placeholder="Prefix" addOnLeading={<>Prefix</>}/>
|
<InputField placeholder="Prefix" addOnLeading={<>Prefix</>} />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Suffix">
|
<Example title="Suffix">
|
||||||
<InputField placeholder="Suffic" addOnSuffix={<>Suffix</>}/>
|
<InputField placeholder="Suffic" addOnSuffix={<>Suffix</>} />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Suffix With Select">
|
<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>
|
||||||
<Example title="Focused">
|
<Example title="Focused">
|
||||||
<InputField placeholder="Focused" className="sb-pseudo--focus"/>
|
<InputField placeholder="Focused" className="sb-pseudo--focus" />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Hovered">
|
<Example title="Hovered">
|
||||||
<InputField placeholder="Hovered" className="sb-pseudo--hover"/>
|
<InputField placeholder="Hovered" className="sb-pseudo--hover" />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Error">
|
<Example title="Error">
|
||||||
<InputField placeholder="Error" error="Error"/>
|
<InputField placeholder="Error" error="Error" />
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
|
@ -55,10 +70,10 @@ Text fields allow users to input and edit text into the product. Usually appear
|
||||||
<InputField />
|
<InputField />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Placeholder">
|
<Example title="Placeholder">
|
||||||
<InputField placeholder="Placeholder"/>
|
<InputField placeholder="Placeholder" />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Filled">
|
<Example title="Filled">
|
||||||
<InputField value="Filled"/>
|
<InputField value="Filled" />
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
|
@ -66,21 +81,21 @@ Text fields allow users to input and edit text into the product. Usually appear
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="All Variants">
|
<Story name="All Variants">
|
||||||
<VariantsTable titles={['Default','Focused', 'Hovered']} columnMinWidth={150}>
|
<VariantsTable titles={["Default", "Focused", "Hovered"]} columnMinWidth={150}>
|
||||||
<VariantRow variant="Default">
|
<VariantRow variant="Default">
|
||||||
<InputField placeholder="Default"/>
|
<InputField placeholder="Default" />
|
||||||
<InputField placeholder="Focused" className="sb-pseudo--focus"/>
|
<InputField placeholder="Focused" className="sb-pseudo--focus" />
|
||||||
<InputField placeholder="Hovered" className="sb-pseudo--hover"/>
|
<InputField placeholder="Hovered" className="sb-pseudo--hover" />
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
<VariantRow variant="Prefixed">
|
<VariantRow variant="Prefixed">
|
||||||
<InputField placeholder="Default" addOnLeading={<>Prefix</>}/>
|
<InputField placeholder="Default" addOnLeading={<>Prefix</>} />
|
||||||
<InputField placeholder="Focused" className="sb-pseudo--focus" addOnLeading={<>Prefix</>}/>
|
<InputField placeholder="Focused" className="sb-pseudo--focus" addOnLeading={<>Prefix</>} />
|
||||||
<InputField placeholder="Hovered" className="sb-pseudo--hover" addOnLeading={<>Prefix</>}/>
|
<InputField placeholder="Hovered" className="sb-pseudo--hover" addOnLeading={<>Prefix</>} />
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
<VariantRow variant="Suffix">
|
<VariantRow variant="Suffix">
|
||||||
<InputField placeholder="Default" addOnSuffix={<>Prefix</>}/>
|
<InputField placeholder="Default" addOnSuffix={<>Prefix</>} />
|
||||||
<InputField placeholder="Focused" className="sb-pseudo--focus" addOnSuffix={<>Prefix</>}/>
|
<InputField placeholder="Focused" className="sb-pseudo--focus" addOnSuffix={<>Prefix</>} />
|
||||||
<InputField placeholder="Hovered" className="sb-pseudo--hover" addOnSuffix={<>Prefix</>}/>
|
<InputField placeholder="Hovered" className="sb-pseudo--hover" addOnSuffix={<>Prefix</>} />
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
</Story>
|
</Story>
|
||||||
|
|
|
@ -1,71 +1,63 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 { 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} />
|
<Meta title="UI/Form/Select Field" component={SelectField} />
|
||||||
|
|
||||||
<Title title="Select" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
|
<Title title="Select" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||||
|
|
||||||
## Definition
|
## 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.
|
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
|
## Structure
|
||||||
|
|
||||||
<CustomArgsTable of={SelectField} />
|
<CustomArgsTable of={SelectField} />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const options = [
|
export const options = [
|
||||||
{ value: 0, label: "Option One" },
|
{ value: 0, label: "Option One" },
|
||||||
{ value: 1, label: "Option Two" },
|
{ value: 1, label: "Option Two" },
|
||||||
{ value: 3, label: "Option Three" },
|
{ value: 3, label: "Option Three" },
|
||||||
{ value: 4, label: "Option Four" },
|
{ value: 4, label: "Option Four" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
<Examples title=" Single Selected / Unselected" footnote={
|
<Examples
|
||||||
<ul>
|
title=" Single Selected / Unselected"
|
||||||
<li>The difference between the types are when they are filled. </li>
|
footnote={
|
||||||
</ul>
|
<ul>
|
||||||
}>
|
<li>The difference between the types are when they are filled. </li>
|
||||||
|
</ul>
|
||||||
|
}>
|
||||||
<Example title="Single Select [Unselected]" isFullWidth>
|
<Example title="Single Select [Unselected]" isFullWidth>
|
||||||
<SelectField
|
<SelectField label={"Single Select"} options={options} />
|
||||||
label={"Single Select"}
|
|
||||||
options={options}
|
|
||||||
/>
|
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Single Select [Selected]" isFullWidth>
|
<Example title="Single Select [Selected]" isFullWidth>
|
||||||
<SelectField
|
<SelectField label={"Single Select"} options={options} defaultValue={options[0]} />
|
||||||
label={"Single Select"}
|
|
||||||
options={options}
|
|
||||||
defaultValue={options[0]}
|
|
||||||
/>
|
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Multi Select [Unselected]" isFullWidth >
|
<Example title="Multi Select [Unselected]" isFullWidth>
|
||||||
<SelectField
|
<SelectField label={"Multi Select"} options={options} isMulti={true} />
|
||||||
label={"Multi Select"}
|
|
||||||
options={options}
|
|
||||||
isMulti={true}
|
|
||||||
/>
|
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Multi Select [Selected]" isFullWidth>
|
<Example title="Multi Select [Selected]" isFullWidth>
|
||||||
<SelectField
|
<SelectField label={"Multi Select"} options={options} isMulti={true} defaultValue={options[0]} />
|
||||||
label={"Multi Select"}
|
|
||||||
options={options}
|
|
||||||
isMulti={true}
|
|
||||||
defaultValue={options[0]}
|
|
||||||
/>
|
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
<Examples title="Variants">
|
<Examples title="Variants">
|
||||||
<Example title="Default">
|
<Example title="Default">
|
||||||
<SelectField
|
<SelectField label={"Default Select"} options={options} />
|
||||||
label={"Default Select"}
|
|
||||||
options={options}/>
|
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Icon Left">
|
<Example title="Icon Left">
|
||||||
WIP
|
WIP
|
||||||
|
@ -73,32 +65,30 @@ export const options = [
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
|
|
||||||
## Variant Caviats (WIP) - To be updated
|
## 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.
|
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
|
```js
|
||||||
// Bad: Inline declaration will cause remounting issues
|
// Bad: Inline declaration will cause remounting issues
|
||||||
const BadSelect = props => (
|
const BadSelect = (props) => (
|
||||||
<Select {...props} components={{
|
<Select
|
||||||
Control: ({ children, ...rest }) => (
|
{...props}
|
||||||
<components.Control {...rest}>
|
components={{
|
||||||
👎 {children}
|
Control: ({ children, ...rest }) => <components.Control {...rest}>👎 {children}</components.Control>,
|
||||||
</components.Control>
|
}}
|
||||||
)}}
|
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
|
|
||||||
// Good: Custom component declared outside of the Select scope
|
// Good: Custom component declared outside of the Select scope
|
||||||
const Control = <IconLeading icon={Plus}/>
|
const Control = <IconLeading icon={Plus} />;
|
||||||
|
|
||||||
const GoodSelect = props => <Select {...props} components={{ Control }} />
|
|
||||||
|
|
||||||
|
const GoodSelect = (props) => <Select {...props} components={{ Control }} />;
|
||||||
```
|
```
|
||||||
|
|
||||||
<Examples title="States ">
|
<Examples title="States ">
|
||||||
<Example title="Default">
|
<Example title="Default">
|
||||||
<SelectField options={options} label={"Default Select"}/>
|
<SelectField options={options} label={"Default Select"} />
|
||||||
</Example>
|
</Example>
|
||||||
{/* <Example title="Hover">
|
{/* <Example title="Hover">
|
||||||
<SelectField options={options} className="sb-pseudo--hover"/>
|
<SelectField options={options} className="sb-pseudo--hover"/>
|
||||||
|
@ -108,13 +98,13 @@ const GoodSelect = props => <Select {...props} components={{ Control }} />
|
||||||
</Example> */}
|
</Example> */}
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
|
|
||||||
## Select Story
|
## Select Story
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="Default">
|
<Story name="Default">
|
||||||
<VariantsTable titles={['Default']} columnMinWidth={450} >
|
<VariantsTable titles={["Default"]} columnMinWidth={450}>
|
||||||
<VariantRow>
|
<VariantRow>
|
||||||
<SelectField options={options} label={"Default Select"}/>
|
<SelectField options={options} label={"Default Select"} />
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
</Story>
|
</Story>
|
||||||
|
|
|
@ -30,52 +30,52 @@ Defines the spacing guide used in Cal.coms design system
|
||||||
<Example title="0"></Example>
|
<Example title="0"></Example>
|
||||||
<Example title="px">
|
<Example title="px">
|
||||||
<Tooltip content="1px">
|
<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>
|
</Tooltip>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="0.5">
|
<Example title="0.5">
|
||||||
<Tooltip content="2px">
|
<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>
|
</Tooltip>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="1">
|
<Example title="1">
|
||||||
<Tooltip content="4px">
|
<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>
|
</Tooltip>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="2">
|
<Example title="2">
|
||||||
<Tooltip content="8px">
|
<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>
|
</Tooltip>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="3">
|
<Example title="3">
|
||||||
<Tooltip content="12px">
|
<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>
|
</Tooltip>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="4">
|
<Example title="4">
|
||||||
<Tooltip content="16px">
|
<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>
|
</Tooltip>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="5">
|
<Example title="5">
|
||||||
<Tooltip content="20px">
|
<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>
|
</Tooltip>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="6">
|
<Example title="6">
|
||||||
<Tooltip content="24px">
|
<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>
|
</Tooltip>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="8">
|
<Example title="8">
|
||||||
<Tooltip content="32px">
|
<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>
|
</Tooltip>
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="10">
|
<Example title="10">
|
||||||
<Tooltip content="48px">
|
<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>
|
</Tooltip>
|
||||||
</Example>
|
</Example>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -1,21 +1,29 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
|
Examples,
|
||||||
|
Example,
|
||||||
|
Note,
|
||||||
|
Title,
|
||||||
|
CustomArgsTable,
|
||||||
|
VariantsTable,
|
||||||
|
VariantRow,
|
||||||
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import { List, ListItem } from "./List";
|
||||||
|
|
||||||
<Meta title="UI/List" component={List} />
|
<Meta title="UI/List" component={List} />
|
||||||
|
|
||||||
<Title title="List" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023"/>
|
<Title title="List" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
|
||||||
|
|
||||||
## Definition
|
## Definition
|
||||||
|
|
||||||
Sums it up nicely.
|
Sums it up nicely.
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story
|
<Story name="List">
|
||||||
name="List">
|
|
||||||
<VariantsTable titles={[]} columnMinWidth={150}>
|
<VariantsTable titles={[]} columnMinWidth={150}>
|
||||||
<VariantRow variant="Default">
|
<VariantRow variant="Default">TODO!</VariantRow>
|
||||||
TODO!
|
|
||||||
</VariantRow>
|
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
|
@ -1,24 +1,35 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
|
Examples,
|
||||||
|
Example,
|
||||||
|
Note,
|
||||||
|
Title,
|
||||||
|
CustomArgsTable,
|
||||||
|
VariantsTable,
|
||||||
|
VariantRow,
|
||||||
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import Logo from "./Logo";
|
||||||
|
|
||||||
<Meta title="UI/Logo" component={Logo} />
|
<Meta title="UI/Logo" component={Logo} />
|
||||||
|
|
||||||
<Title title="Logo" suffix="Brief" subtitle="Version 2.0 — Last Update: 02 Jan 2023"/>
|
<Title title="Logo" suffix="Brief" subtitle="Version 2.0 — Last Update: 02 Jan 2023" />
|
||||||
|
|
||||||
## Definition
|
## Definition
|
||||||
|
|
||||||
Main Cal.com brand logo
|
Main Cal.com brand logo
|
||||||
|
|
||||||
<CustomArgsTable of={Logo} />
|
<CustomArgsTable of={Logo} />
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="Logo">
|
<Story name="Logo">
|
||||||
<VariantsTable titles={['']} columnMinWidth={150}>
|
<VariantsTable titles={[""]} columnMinWidth={150}>
|
||||||
<VariantRow variant="Small">
|
<VariantRow variant="Small">
|
||||||
<Logo small />
|
<Logo small />
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
<VariantRow variant="Default">
|
<VariantRow variant="Default">
|
||||||
<Logo />
|
<Logo />
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
</Story>
|
</Story>
|
||||||
|
|
|
@ -11,6 +11,7 @@ import {
|
||||||
CustomArgsTable,
|
CustomArgsTable,
|
||||||
} from "@calcom/storybook/components";
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import { Button } from "../button";
|
||||||
import {
|
import {
|
||||||
Sheet,
|
Sheet,
|
||||||
SheetClose,
|
SheetClose,
|
||||||
|
@ -22,9 +23,6 @@ import {
|
||||||
SheetTrigger,
|
SheetTrigger,
|
||||||
} from "./sheet";
|
} from "./sheet";
|
||||||
|
|
||||||
import {Button} from "../button";
|
|
||||||
|
|
||||||
|
|
||||||
<Meta title="UI/Sheet" />
|
<Meta title="UI/Sheet" />
|
||||||
|
|
||||||
<Title title="Sheet" suffix="Brief" subtitle="Version 2.0 — Last Update: 21 June 2023" />
|
<Title title="Sheet" suffix="Brief" subtitle="Version 2.0 — Last Update: 21 June 2023" />
|
||||||
|
@ -36,22 +34,20 @@ A sheet is a container that can be used to display content on differnt sides of
|
||||||
## Structure
|
## Structure
|
||||||
|
|
||||||
<Examples title="Spacing">
|
<Examples title="Spacing">
|
||||||
<Sheet>
|
<Sheet>
|
||||||
<SheetTrigger asChild>
|
<SheetTrigger asChild>
|
||||||
<Button>Open default sheet</Button>
|
<Button>Open default sheet</Button>
|
||||||
</SheetTrigger>
|
</SheetTrigger>
|
||||||
<SheetContent position="right" size={"default"}>
|
<SheetContent position="right" size={"default"}>
|
||||||
<SheetHeader>
|
<SheetHeader>
|
||||||
<SheetTitle>Edit profile</SheetTitle>
|
<SheetTitle>Edit profile</SheetTitle>
|
||||||
<SheetDescription>
|
<SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
|
||||||
Make changes to your profile here. Click save when you're done.
|
</SheetHeader>
|
||||||
</SheetDescription>
|
<SheetFooter>
|
||||||
</SheetHeader>
|
<SheetClose asChild>
|
||||||
<SheetFooter>
|
<Button type="submit">Save changes</Button>
|
||||||
<SheetClose asChild>
|
</SheetClose>
|
||||||
<Button type="submit">Save changes</Button>
|
</SheetFooter>
|
||||||
</SheetClose>
|
</SheetContent>
|
||||||
</SheetFooter>
|
|
||||||
</SheetContent>
|
|
||||||
</Sheet>
|
</Sheet>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
|
@ -1,35 +1,44 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||||
import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
|
|
||||||
|
|
||||||
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} />
|
<Meta title="UI/Skeleton" component={Skeleton} />
|
||||||
|
|
||||||
<Title title="Skeleton" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
|
<Title title="Skeleton" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||||
|
|
||||||
|
|
||||||
## Definition
|
## 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.
|
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
|
## Structure
|
||||||
|
|
||||||
<CustomArgsTable of={Skeleton} />
|
<CustomArgsTable of={Skeleton} />
|
||||||
|
|
||||||
|
<Examples title="Skeleton Avatar">
|
||||||
<Examples title="Skeleton Avatar" >
|
|
||||||
<Example title="Primary">
|
<Example title="Primary">
|
||||||
<SkeletonAvatar className="h-8 w-8" />
|
<SkeletonAvatar className="h-8 w-8" />
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
<Examples title="Skeleton Text" >
|
<Examples title="Skeleton Text">
|
||||||
<Example title="Primary">
|
<Example title="Primary">
|
||||||
<SkeletonText className="h-4 w-32"/>
|
<SkeletonText className="h-4 w-32" />
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
<Examples title="Skeleton Button" >
|
<Examples title="Skeleton Button">
|
||||||
<Example title="Primary">
|
<Example title="Primary">
|
||||||
<SkeletonButton className="h-8 w-32"/>
|
<SkeletonButton className="h-8 w-32" />
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Examples,
|
Examples,
|
||||||
Example,
|
Example,
|
||||||
|
@ -8,58 +9,58 @@ import {
|
||||||
VariantColumn,
|
VariantColumn,
|
||||||
RowTitles,
|
RowTitles,
|
||||||
CustomArgsTable,
|
CustomArgsTable,
|
||||||
VariantRow
|
VariantRow,
|
||||||
} from "@calcom/storybook/components";
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
import { SuccessToast,ErrorToast,WarningToast,DefaultToast } from './';
|
import { SuccessToast, ErrorToast, WarningToast, DefaultToast } from "./";
|
||||||
|
|
||||||
<Meta title="UI/Toasts" component={DefaultToast} />
|
<Meta title="UI/Toasts" component={DefaultToast} />
|
||||||
|
|
||||||
<Title title="Toasts" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
|
<Title title="Toasts" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||||
|
|
||||||
|
|
||||||
## Definition
|
## 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
|
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
|
## Structure
|
||||||
|
|
||||||
<CustomArgsTable of={DefaultToast} />
|
<CustomArgsTable of={DefaultToast} />
|
||||||
|
|
||||||
|
<Examples title="Toasts">
|
||||||
<Examples title="Toasts" >
|
|
||||||
<Example title="Default">
|
<Example title="Default">
|
||||||
<DefaultToast message="Default Toast" toastVisible={true}/>
|
<DefaultToast message="Default Toast" toastVisible={true} />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Success">
|
<Example title="Success">
|
||||||
<SuccessToast message="Success Toast" toastVisible={true}/>
|
<SuccessToast message="Success Toast" toastVisible={true} />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Warning">
|
<Example title="Warning">
|
||||||
<WarningToast message="Warning Toast" toastVisible={true}/>
|
<WarningToast message="Warning Toast" toastVisible={true} />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Error">
|
<Example title="Error">
|
||||||
<ErrorToast message="Error Toast" toastVisible={true}/>
|
<ErrorToast message="Error Toast" toastVisible={true} />
|
||||||
</Example>
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
## Toast Story
|
## Toast Story
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="Default"
|
<Story
|
||||||
args={{
|
name="Default"
|
||||||
message: 'Default Toast',
|
args={{
|
||||||
toastVisible: true
|
message: "Default Toast",
|
||||||
}}
|
toastVisible: true,
|
||||||
argTypes={{
|
}}
|
||||||
message: { control: 'text' },
|
argTypes={{
|
||||||
toastVisible: { control: 'boolean'}
|
message: { control: "text" },
|
||||||
}}>
|
toastVisible: { control: "boolean" },
|
||||||
{({message, toastVisible}) => (
|
}}>
|
||||||
<VariantsTable titles={['Default','Success', 'Warning', 'Error']} columnMinWidth={150}>
|
{({ message, toastVisible }) => (
|
||||||
|
<VariantsTable titles={["Default", "Success", "Warning", "Error"]} columnMinWidth={150}>
|
||||||
<VariantRow variant="Default">
|
<VariantRow variant="Default">
|
||||||
<DefaultToast message={message} toastVisible={toastVisible}/>
|
<DefaultToast message={message} toastVisible={toastVisible} />
|
||||||
<SuccessToast message={message} toastVisible={toastVisible}/>
|
<SuccessToast message={message} toastVisible={toastVisible} />
|
||||||
<WarningToast message={message} toastVisible={toastVisible}/>
|
<WarningToast message={message} toastVisible={toastVisible} />
|
||||||
<ErrorToast message={message} toastVisible={toastVisible}/>
|
<ErrorToast message={message} toastVisible={toastVisible} />
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,60 +1,69 @@
|
||||||
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 { 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} />
|
<Meta title="UI/Tooltip" component={Tooltip} />
|
||||||
|
|
||||||
<Title title="Tooltip" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023"/>
|
<Title title="Tooltip" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
|
||||||
|
|
||||||
## Definition
|
## Definition
|
||||||
|
|
||||||
Tooltip components can be used to provide additional information about an element when the user hovers over or focuses on the element.
|
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} />
|
<CustomArgsTable of={Tooltip} />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="Tooltip"
|
<Story
|
||||||
args={{
|
name="Tooltip"
|
||||||
alertMsg: 'Copied!',
|
args={{
|
||||||
hoverMsg: "Copy to clipboard",
|
alertMsg: "Copied!",
|
||||||
content: 'Hover Me',
|
hoverMsg: "Copy to clipboard",
|
||||||
}}
|
content: "Hover Me",
|
||||||
argTypes={{
|
}}
|
||||||
alertMsg: {
|
argTypes={{
|
||||||
control: {
|
alertMsg: {
|
||||||
type: 'text',
|
control: {
|
||||||
},
|
type: "text",
|
||||||
},
|
},
|
||||||
hoverMsg: {
|
},
|
||||||
control: {
|
hoverMsg: {
|
||||||
type: 'text',
|
control: {
|
||||||
},
|
type: "text",
|
||||||
},
|
},
|
||||||
content: {
|
},
|
||||||
control: {
|
content: {
|
||||||
type: 'text',
|
control: {
|
||||||
},
|
type: "text",
|
||||||
},
|
},
|
||||||
}}
|
},
|
||||||
>
|
}}>
|
||||||
{({ alertMsg, hoverMsg, content }) => (
|
{({ alertMsg, hoverMsg, content }) => (
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<VariantsTable titles={['']} columnMinWidth={150}>
|
<VariantsTable titles={[""]} columnMinWidth={150}>
|
||||||
<VariantRow variant="Default">
|
<VariantRow variant="Default">
|
||||||
<Tooltip content={`${hoverMsg}`}>
|
<Tooltip content={`${hoverMsg}`}>
|
||||||
<span
|
<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={() => {
|
onClick={() => {
|
||||||
alert(`${alertMsg}`);
|
alert(`${alertMsg}`);
|
||||||
}}>
|
}}>
|
||||||
{content}
|
{content}
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
)}
|
)}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
|
@ -1,87 +1,98 @@
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
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 {
|
||||||
|
Examples,
|
||||||
|
Example,
|
||||||
|
Note,
|
||||||
|
Title,
|
||||||
|
CustomArgsTable,
|
||||||
|
VariantsTable,
|
||||||
|
VariantRow,
|
||||||
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
import { TopBanner } from "./TopBanner";
|
||||||
|
|
||||||
<Meta title="UI/TopBanner" component={TopBanner} />
|
<Meta title="UI/TopBanner" component={TopBanner} />
|
||||||
|
|
||||||
<Title title="TopBanner" suffix="Brief" />
|
<Title title="TopBanner" suffix="Brief" />
|
||||||
|
|
||||||
|
|
||||||
## Definition
|
## Definition
|
||||||
|
|
||||||
Top banner will be position on the very top of the page to communicate on what’s wrong or what’s new.
|
Top banner will be position on the very top of the page to communicate on what’s wrong or what’s new.
|
||||||
|
|
||||||
|
|
||||||
## Structure
|
## Structure
|
||||||
|
|
||||||
Each toast has a state to represent neutral, positive or negative responses.
|
Each toast has a state to represent neutral, positive or negative responses.
|
||||||
|
|
||||||
<CustomArgsTable of={TopBanner} />
|
<CustomArgsTable of={TopBanner} />
|
||||||
|
|
||||||
<Examples title="Top Banner Style">
|
<Examples title="Top Banner Style">
|
||||||
<Example title="Default" isFullWidth={true} >
|
<Example title="Default" isFullWidth={true}>
|
||||||
<TopBanner
|
|
||||||
actions={
|
|
||||||
<button
|
|
||||||
className="border-b border-black text-sm"
|
|
||||||
onClick={() => {
|
|
||||||
console.log("test");
|
|
||||||
}}>
|
|
||||||
Action
|
|
||||||
</button>
|
|
||||||
}
|
|
||||||
text="Something big is happening we want you to know about."
|
|
||||||
/>
|
|
||||||
</Example>
|
|
||||||
<Example title="Warning" isFullWidth={true} >
|
|
||||||
<TopBanner
|
<TopBanner
|
||||||
actions={
|
actions={
|
||||||
<button
|
<button
|
||||||
className="border-b border-black text-sm"
|
className="border-b border-black text-sm"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
console.log("test");
|
console.log("test");
|
||||||
}}>
|
}}>
|
||||||
Action
|
Action
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
variant="warning"
|
text="Something big is happening we want you to know about."
|
||||||
text="An app wide warning is occuring that should be resolved."
|
/>
|
||||||
/>
|
</Example>
|
||||||
</Example>
|
<Example title="Warning" isFullWidth={true}>
|
||||||
<Example title="Error" isFullWidth={true} >
|
|
||||||
<TopBanner
|
<TopBanner
|
||||||
actions={
|
actions={
|
||||||
<button
|
<button
|
||||||
className="border-b border-black text-sm"
|
className="border-b border-black text-sm"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
console.log("test");
|
console.log("test");
|
||||||
}}>
|
}}>
|
||||||
Action
|
Action
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
variant="error"
|
variant="warning"
|
||||||
text="A major error is occuring that must be resolved."
|
text="An app wide warning is occuring that should be resolved."
|
||||||
/>
|
/>
|
||||||
</Example>
|
</Example>
|
||||||
|
<Example title="Error" isFullWidth={true}>
|
||||||
|
<TopBanner
|
||||||
|
actions={
|
||||||
|
<button
|
||||||
|
className="border-b border-black text-sm"
|
||||||
|
onClick={() => {
|
||||||
|
console.log("test");
|
||||||
|
}}>
|
||||||
|
Action
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
variant="error"
|
||||||
|
text="A major error is occuring that must be resolved."
|
||||||
|
/>
|
||||||
|
</Example>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="TopBanner"
|
<Story
|
||||||
args={{
|
name="TopBanner"
|
||||||
text: 'Something big is happening we want you to know about.',
|
args={{
|
||||||
variant: 'default'
|
text: "Something big is happening we want you to know about.",
|
||||||
}}
|
variant: "default",
|
||||||
argTypes={{
|
}}
|
||||||
variant: {
|
argTypes={{
|
||||||
control: {
|
variant: {
|
||||||
type: 'select',
|
control: {
|
||||||
options: ['default', 'warning', 'error'],
|
type: "select",
|
||||||
},
|
options: ["default", "warning", "error"],
|
||||||
},
|
},
|
||||||
text: {
|
},
|
||||||
control: {
|
text: {
|
||||||
type: 'text',
|
control: {
|
||||||
},
|
type: "text",
|
||||||
},
|
},
|
||||||
}}>
|
},
|
||||||
|
}}>
|
||||||
{({ text, variant, ...args }) => (
|
{({ text, variant, ...args }) => (
|
||||||
<TopBanner
|
<TopBanner
|
||||||
{...args}
|
{...args}
|
||||||
|
|
Loading…
Reference in New Issue