-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
1,672 additions
and
1,383 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,3 +14,4 @@ export const Alert = classed("div", "alert", { | |
| role: "alert", | ||
| }, | ||
| }); | ||
| Alert.displayName = "Alert"; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import React from "react"; | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { getVariantConfig } from "@tw-classed/react"; | ||
| import { toArgTypes } from "../storybook-helpers"; | ||
| import { Artboard } from "."; | ||
|
|
||
| const meta: Meta<typeof Artboard> = { | ||
| title: "Layout/Artboard", | ||
| component: Artboard, | ||
| argTypes: toArgTypes(getVariantConfig(Artboard)), | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof Artboard>; | ||
| export const Default: Story = { | ||
| args: { | ||
| children: "320×568", | ||
| }, | ||
| render: (args) => { | ||
| return <Artboard {...args} />; | ||
| }, | ||
| }; | ||
|
|
||
| export const Size2: Story = { | ||
| ...Default, | ||
| args: { | ||
| size: "2", | ||
| children: "375×667", | ||
| }, | ||
| }; | ||
| export const Size3: Story = { | ||
| ...Default, | ||
| args: { | ||
| size: "3", | ||
| children: "414×736", | ||
| }, | ||
| }; | ||
| export const Size4: Story = { | ||
| ...Default, | ||
| args: { | ||
| size: "4", | ||
| children: "375×812", | ||
| }, | ||
| }; | ||
| export const Size5: Story = { | ||
| ...Default, | ||
| args: { | ||
| size: "5", | ||
| children: "414×896", | ||
| }, | ||
| }; | ||
| export const Size6: Story = { | ||
| ...Default, | ||
| args: { | ||
| size: "6", | ||
| children: "320×1024", | ||
| }, | ||
| }; | ||
| export const HorizontalSize1: Story = { | ||
| ...Default, | ||
| args: { | ||
| children: "320×568", | ||
| horizontal: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const HorizontalSize2: Story = { | ||
| ...Default, | ||
| args: { | ||
| size: "2", | ||
| children: "375×667", | ||
| horizontal: true, | ||
| }, | ||
| }; | ||
| export const HorizontalSize3: Story = { | ||
| ...Default, | ||
| args: { | ||
| size: "3", | ||
| children: "414×736", | ||
| horizontal: true, | ||
| }, | ||
| }; | ||
| export const HorizontalSize4: Story = { | ||
| ...Default, | ||
| args: { | ||
| size: "4", | ||
| children: "375×812", | ||
| horizontal: true, | ||
| }, | ||
| }; | ||
| export const HorizontalSize5: Story = { | ||
| ...Default, | ||
| args: { | ||
| size: "5", | ||
| children: "414×896", | ||
| horizontal: true, | ||
| }, | ||
| }; | ||
| export const HorizontalSize6: Story = { | ||
| ...Default, | ||
| args: { | ||
| size: "6", | ||
| children: "320×1024", | ||
| horizontal: true, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { classed } from "../classed.config"; | ||
| import { configWithThemeFn } from "../config"; | ||
|
|
||
| export const Artboard = classed("div", "artboard", { | ||
| ...configWithThemeFn({ | ||
| demo: { | ||
| true: "artboard-demo", | ||
| }, | ||
| size: { | ||
| "1": "phone-1", | ||
| "2": "phone-2", | ||
| "3": "phone-3", | ||
| "4": "phone-4", | ||
| "5": "phone-5", | ||
| "6": "phone-6", | ||
| }, | ||
| horizontal: { | ||
| true: "artboard-horizontal", | ||
| }, | ||
| }), | ||
| defaultVariants: { | ||
| demo: true, | ||
| size: "1", | ||
| }, | ||
| }); | ||
| Artboard.displayName = "Artboard"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { Artboard } from "./artboard"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.