diff --git a/src/assets/svg/Arrow-Left.svg b/src/assets/svg/Arrow-Left.svg index e768e5a..2d0004a 100644 --- a/src/assets/svg/Arrow-Left.svg +++ b/src/assets/svg/Arrow-Left.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..9eb334e --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,81 @@ +/* -------------------------------------------------------------------------- */ +/* Imports */ +/* -------------------------------------------------------------------------- */ +import React from "react"; +import classNames from "classnames"; +import '../index.css' +/* -------------------------------------------------------------------------- */ +/* Component props */ +/* -------------------------------------------------------------------------- */ +type Props = { + emphasis?: 'high' | 'medium' | 'low' | undefined, + disabled?:boolean, + iconed?: boolean, +} & Omit, ""> + + +/* -------------------------------------------------------------------------- */ +/* Component implementation */ +/* -------------------------------------------------------------------------- */ +export const Button = ({ + emphasis ='high', + disabled = false, + iconed = false, + className, + children, ...props} : Props) => { + + return( + + ); +} + diff --git a/src/components/controls/Button.tsx.deprecated b/src/components/controls/Button.tsx.deprecated new file mode 100644 index 0000000..2107bac --- /dev/null +++ b/src/components/controls/Button.tsx.deprecated @@ -0,0 +1,239 @@ +import classNames from 'classnames'; +import { + StyleColorVariants, + StyleColorVariantsMap, + StyleType, +} from 'core/_variants'; +import React from 'react'; + +type Props = { + href?: string; + variant?: StyleColorVariants; + type?: StyleType; + iconed?: boolean | "only"; + glowing?: boolean; + disabled?: boolean; + onClick?: (event: React.MouseEvent) => void; + children?: React.ReactNode; + className?: string | undefined; + rel?: string | undefined; + htmlType?: 'button' | 'submit' | 'reset' | undefined; +}; + +const buttonBgVariants: StyleColorVariantsMap = { + gray: 'bg-gray-500', + blue: 'bg-blue-500', + emerald: 'bg-emerald-600', + pink: 'bg-pink-500', + purple: 'bg-purple-500', + red: 'bg-red-500', + sky: 'bg-sky-500', + yellow: 'bg-yellow-500', + "dark-coral": "bg-dark-coral-500", +}; + +const buttonBgDisabledVariants: StyleColorVariantsMap = { + gray: 'bg-gray-200', + blue: 'bg-blue-100/10', + emerald: 'bg-emerald-200/50', + pink: 'bg-pink-200/50', + purple: 'bg-purple-200/50', + red: 'bg-red-200/50', + sky: 'bg-sky-200/50', + yellow: 'bg-yellow-200/50', + "dark-coral": "bg-dark-coral-200/50", +}; + +const buttonBgDisabledHoverVariants: StyleColorVariantsMap = { + gray: 'hover:bg-gray-500/50', + blue: 'hover:bg-blue-100/10', + emerald: 'hover:bg-emerald-500/50', + pink: 'hover:bg-pink-500/50', + purple: 'hover:bg-purple-500/50', + red: 'hover:bg-red-500/50', + sky: 'hover:bg-sky-500/50', + yellow: 'hover:bg-yellow-500/50', + "dark-coral": "hover:bg-dark-coral-500/50", +}; + +const buttonHoverBgVariants: StyleColorVariantsMap = { + gray: 'hover:bg-gray-600', + blue: 'hover:bg-blue-400', + emerald: 'hover:bg-emerald-600', + pink: 'hover:bg-pink-600', + purple: 'hover:bg-purple-600', + red: 'hover:bg-red-600', + sky: 'hover:bg-sky-600', + yellow: 'hover:bg-yellow-600', + "dark-coral": "hover:bg-dark-coral-600", +}; + +const buttonBorderVariants: StyleColorVariantsMap = { + gray: 'border-gray-500', + blue: 'border-blue-500', + emerald: 'border-emerald-700', + pink: 'border-pink-300', + purple: 'border-purple-300', + red: 'border-red-300', + sky: 'border-sky-300', + yellow: 'border-yellow-300', + "dark-coral": "border-dark-coral-500", +}; + +const buttonBorderHoverVariants: StyleColorVariantsMap = { + gray: 'hover:border-gray-500', + blue: 'hover:border-blue-400', + emerald: 'hover:border-emerald-900', + pink: 'hover:border-pink-400', + purple: 'hover:border-purple-400', + red: 'hover:border-red-500', + sky: 'hover:border-sky-400', + yellow: 'hover:border-yellow-400', + "dark-coral": "hover:border-dark-coral-400", +}; + +const buttonTextVariants: StyleColorVariantsMap = { + gray: 'text-white', + blue: 'text-white', + emerald: 'text-emerald-300', + pink: 'text-white', + purple: 'text-white', + red: 'text-white', + sky: 'text-white', + yellow: 'text-white', + "dark-coral": "text-white", +}; + +const buttonTextHoverVariants: StyleColorVariantsMap = { + blue: 'hover:text-white', + emerald: 'hover:text-emerald-900', + gray: 'hover:text-white', + pink: 'hover:text-white', + purple: 'hover:text-white', + red: 'hover:text-white', + sky: 'hover:text-white', + yellow: 'hover:text-white', + "dark-coral": 'hover:text-white', +} + +const buttonTextMutedVariants: StyleColorVariantsMap = { + gray: 'text-gray-500', + blue: 'text-gray-50', + emerald: 'text-gray-50', + pink: 'text-gray-50', + purple: 'text-gray-50', + red: 'text-gray-50', + sky: 'text-gray-50', + yellow: 'text-gray-50', + "dark-coral": "text-gray-500", +}; + +const buttonGlowVariants: StyleColorVariantsMap = { + gray: 'shadow-gray-300/50', + blue: 'shadow-blue-500/50', + emerald: 'shadow-blue-700/50', + pink: 'shadow-blue-300/50', + purple: 'shadow-blue-300/50', + red: 'shadow-blue-300/50', + sky: 'shadow-blue-300/50', + yellow: 'shadow-blue-300/50', + "dark-coral": "shadow-dark-coral-300/50", +}; + +const buttonHoverGlowVariants: StyleColorVariantsMap = { + gray: 'hover:shadow-gray-300/50', + blue: 'hover:shadow-blue-400/50', + emerald: 'hover:shadow-blue-300/50', + pink: 'hover:shadow-blue-300/50', + purple: 'hover:shadow-blue-300/50', + red: 'hover:shadow-blue-300/50', + sky: 'hover:shadow-blue-300/50', + yellow: 'hover:shadow-blue-300/50', + "dark-coral": "hover:shadow-dark-coral-300/50", +}; + +const isURL = (str: string) => + /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)\S*$/.test(str); + +const isInternalURL = (str: string) => /^\/(\S*\/)*\S*\/?$/.test(str); + +/** + * Common button component + * @param {string|undefined} href New location link + * @param {boolean} iconed Flag to process component with icon. Default: `false` + * @param {StyleGlobalVariants|undefined} variant Button variant. + * Default: `base` + * @param {StyleType} type Button type. + * Default: `fill` + * @param {boolean|undefined} glowing Enables glowing shadow around + * button element. Default `false` + * @param {boolean|undefined} disabled Shows button element as + * disabled item + * @return {JSX.Element} + */ +const Button = ({ + href, + iconed, + variant = 'gray', + type = 'fill', + glowing = false, + disabled, + onClick: onPress, + children, + className, + rel, + htmlType, +}: Props) =>{ + const isExternal = isURL(href ?? ''); + const isInternal = isInternalURL(href ?? ''); + + const As = isExternal || isInternal ? 'a' : 'button'; + + return ( + + {children} + + ); +}; + +export default Button; diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx index c331bd4..afa6387 100644 --- a/src/stories/Button.stories.tsx +++ b/src/stories/Button.stories.tsx @@ -1,41 +1,19 @@ -import React from 'react'; +import React from "react"; import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { Button } from "../components/Button"; -import { Button } from './Button'; -// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - component: Button, - // More on argTypes: https://storybook.js.org/docs/react/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - }, + +export default{ + title: 'Button', + component: Button, } as ComponentMeta; -// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args const Template: ComponentStory = (args) => ; -export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/react/writing-stories/args -Primary.args = { - primary: true, - label: 'Button', -}; +export const Normal = Template.bind({}); -export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', -}; - -export const Large = Template.bind({}); -Large.args = { - size: 'large', - label: 'Button', -}; - -export const Small = Template.bind({}); -Small.args = { - size: 'small', - label: 'Button', +Normal.args = { + emphasis: 'high', + children: ['Hello there'], }; diff --git a/src/stories/Button.tsx b/src/stories/Button.tsx deleted file mode 100644 index c33be6e..0000000 --- a/src/stories/Button.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import './button.css'; - -interface ButtonProps { - /** - * Is this the principal call to action on the page? - */ - primary?: boolean; - /** - * What background color to use - */ - backgroundColor?: string; - /** - * How large should the button be? - */ - size?: 'small' | 'medium' | 'large'; - /** - * Button contents - */ - label: string; - /** - * Optional click handler - */ - onClick?: () => void; -} - -/** - * Primary UI component for user interaction - */ -export const Button = ({ - primary = false, - size = 'medium', - backgroundColor, - label, - ...props -}: ButtonProps) => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - return ( - - ); -}; diff --git a/src/stories/Header.stories.tsx b/src/stories/Header.stories.tsx deleted file mode 100644 index 7e9283e..0000000 --- a/src/stories/Header.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -import { Header } from './Header'; - -export default { - title: 'Example/Header', - component: Header, - parameters: { - // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout - layout: 'fullscreen', - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) =>
; - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: { - name: 'Jane Doe', - }, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = {}; diff --git a/src/stories/Header.tsx b/src/stories/Header.tsx deleted file mode 100644 index dc3f3c1..0000000 --- a/src/stories/Header.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; - -import { Button } from './Button'; -import './header.css'; - -type User = { - name: string; -}; - -interface HeaderProps { - user?: User; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; -} - -export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => ( -
-
-
- - - - - - - -

Acme

-
-
- {user ? ( - <> - - Welcome, {user.name}! - -
-
- -); diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.stories.mdx deleted file mode 100644 index edc33ed..0000000 --- a/src/stories/Introduction.stories.mdx +++ /dev/null @@ -1,211 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; -import Code from './assets/code-brackets.svg'; -import Colors from './assets/colors.svg'; -import Comments from './assets/comments.svg'; -import Direction from './assets/direction.svg'; -import Flow from './assets/flow.svg'; -import Plugin from './assets/plugin.svg'; -import Repo from './assets/repo.svg'; -import StackAlt from './assets/stackalt.svg'; - - - - - -# Welcome to Storybook - -Storybook helps you build UI components in isolation from your app's business logic, data, and context. -That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. - -Browse example stories now by navigating to them in the sidebar. -View their code in the `stories` directory to learn how they work. -We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. - -
Configure
- -
- - plugin - - Presets for popular tools - Easy setup for TypeScript, SCSS and more. - - - - Build - - Build configuration - How to customize webpack and Babel - - - - colors - - Styling - How to load and configure CSS libraries - - - - flow - - Data - Providers and mocking for data libraries - - -
- -
Learn
- -
- - repo - - Storybook documentation - Configure, customize, and extend - - - - direction - - In-depth guides - Best practices from leading teams - - - - code - - GitHub project - View the source and add issues - - - - comments - - Discord chat - Chat with maintainers and the community - - -
- -
- TipEdit the Markdown in{' '} - stories/Introduction.stories.mdx -
diff --git a/src/stories/Page.stories.tsx b/src/stories/Page.stories.tsx deleted file mode 100644 index a0ea79f..0000000 --- a/src/stories/Page.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { within, userEvent } from '@storybook/testing-library'; -import { Page } from './Page'; - -export default { - title: 'Example/Page', - component: Page, - parameters: { - // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout - layout: 'fullscreen', - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ; - -export const LoggedOut = Template.bind({}); - -export const LoggedIn = Template.bind({}); - -// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing -LoggedIn.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { name: /Log in/i }); - await userEvent.click(loginButton); -}; diff --git a/src/stories/Page.tsx b/src/stories/Page.tsx deleted file mode 100644 index 522d342..0000000 --- a/src/stories/Page.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; - -import { Header } from './Header'; -import './page.css'; - -type User = { - name: string; -}; - -export const Page: React.VFC = () => { - const [user, setUser] = React.useState(); - - return ( -
-
setUser({ name: 'Jane Doe' })} - onLogout={() => setUser(undefined)} - onCreateAccount={() => setUser({ name: 'Jane Doe' })} - /> - -
-

Pages in Storybook

-

- We recommend building UIs with a{' '} - - component-driven - {' '} - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page - data in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at{' '} - - Storybook tutorials - - . Read more in the{' '} - - docs - - . -

-
- Tip Adjust the width of the canvas with the{' '} - - - - - - Viewports addon in the toolbar -
-
-
- ); -}; diff --git a/src/stories/assets/code-brackets.svg b/src/stories/assets/code-brackets.svg deleted file mode 100644 index 73de947..0000000 --- a/src/stories/assets/code-brackets.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/code-brackets \ No newline at end of file diff --git a/src/stories/assets/colors.svg b/src/stories/assets/colors.svg deleted file mode 100644 index 17d58d5..0000000 --- a/src/stories/assets/colors.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/colors \ No newline at end of file diff --git a/src/stories/assets/comments.svg b/src/stories/assets/comments.svg deleted file mode 100644 index 6493a13..0000000 --- a/src/stories/assets/comments.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/comments \ No newline at end of file diff --git a/src/stories/assets/direction.svg b/src/stories/assets/direction.svg deleted file mode 100644 index 65676ac..0000000 --- a/src/stories/assets/direction.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/direction \ No newline at end of file diff --git a/src/stories/assets/flow.svg b/src/stories/assets/flow.svg deleted file mode 100644 index 8ac27db..0000000 --- a/src/stories/assets/flow.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/flow \ No newline at end of file diff --git a/src/stories/assets/plugin.svg b/src/stories/assets/plugin.svg deleted file mode 100644 index 29e5c69..0000000 --- a/src/stories/assets/plugin.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/plugin \ No newline at end of file diff --git a/src/stories/assets/repo.svg b/src/stories/assets/repo.svg deleted file mode 100644 index f386ee9..0000000 --- a/src/stories/assets/repo.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/repo \ No newline at end of file diff --git a/src/stories/assets/stackalt.svg b/src/stories/assets/stackalt.svg deleted file mode 100644 index 9b7ad27..0000000 --- a/src/stories/assets/stackalt.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/stackalt \ No newline at end of file diff --git a/src/stories/button.css b/src/stories/button.css deleted file mode 100644 index dc91dc7..0000000 --- a/src/stories/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 700; - border: 0; - border-radius: 3em; - cursor: pointer; - display: inline-block; - line-height: 1; -} -.storybook-button--primary { - color: white; - background-color: #1ea7fd; -} -.storybook-button--secondary { - color: #333; - background-color: transparent; - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; -} -.storybook-button--small { - font-size: 12px; - padding: 10px 16px; -} -.storybook-button--medium { - font-size: 14px; - padding: 11px 20px; -} -.storybook-button--large { - font-size: 16px; - padding: 12px 24px; -} diff --git a/src/stories/header.css b/src/stories/header.css deleted file mode 100644 index 830610e..0000000 --- a/src/stories/header.css +++ /dev/null @@ -1,32 +0,0 @@ -.wrapper { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - display: flex; - align-items: center; - justify-content: space-between; -} - -svg { - display: inline-block; - vertical-align: top; -} - -h1 { - font-weight: 900; - font-size: 20px; - line-height: 1; - margin: 6px 0 6px 10px; - display: inline-block; - vertical-align: top; -} - -button + button { - margin-left: 10px; -} - -.welcome { - color: #333; - font-size: 14px; - margin-right: 10px; -} diff --git a/src/stories/page.css b/src/stories/page.css deleted file mode 100644 index fbc32ae..0000000 --- a/src/stories/page.css +++ /dev/null @@ -1,69 +0,0 @@ -section { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 24px; - padding: 48px 20px; - margin: 0 auto; - max-width: 600px; - color: #333; -} - -section h2 { - font-weight: 900; - font-size: 32px; - line-height: 1; - margin: 0 0 4px; - display: inline-block; - vertical-align: top; -} - -section p { - margin: 1em 0; -} - -section a { - text-decoration: none; - color: #1ea7fd; -} - -section ul { - padding-left: 30px; - margin: 1em 0; -} - -section li { - margin-bottom: 8px; -} - -section .tip { - display: inline-block; - border-radius: 1em; - font-size: 11px; - line-height: 12px; - font-weight: 700; - background: #e7fdd8; - color: #66bf3c; - padding: 4px 12px; - margin-right: 10px; - vertical-align: top; -} - -section .tip-wrapper { - font-size: 13px; - line-height: 20px; - margin-top: 40px; - margin-bottom: 40px; -} - -section .tip-wrapper svg { - display: inline-block; - height: 12px; - width: 12px; - margin-right: 4px; - vertical-align: top; - margin-top: 3px; -} - -section .tip-wrapper svg path { - fill: #1ea7fd; -}