From cd41e86d294c3d6669203639a6a740535c337a52 Mon Sep 17 00:00:00 2001 From: Xaviju Date: Wed, 22 May 2024 10:34:06 +0200 Subject: [PATCH] Add main doc files --- frontend/.storybook/main.js | 1 + frontend/.storybook/preview.js | 1 + frontend/src/app/main/ui/GettingStarted.mdx | 66 +++++++++++++++ .../ui/components/buttons/simple_button.cljs | 5 +- .../ui/components/buttons/simple_button.mdx | 80 +++++++++++++++++-- .../ui/components/buttons/simple_button.scss | 9 --- .../buttons/simple_button.stories.jsx | 35 ++++---- 7 files changed, 161 insertions(+), 36 deletions(-) create mode 100644 frontend/src/app/main/ui/GettingStarted.mdx diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js index a1b422ae6..81b288496 100644 --- a/frontend/.storybook/main.js +++ b/frontend/.storybook/main.js @@ -14,6 +14,7 @@ const config = { }, docs: { autodocs: "tag", + defaultName: "Documentation", }, }; export default config; diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js index de50ecbf7..95d65432c 100644 --- a/frontend/.storybook/preview.js +++ b/frontend/.storybook/preview.js @@ -4,6 +4,7 @@ import "../resources/public/css/main.css"; const preview = { parameters: { actions: { argTypesRegex: "^on[A-Z].*" }, + layout: "centered", controls: { matchers: { color: /(background|color)$/i, diff --git a/frontend/src/app/main/ui/GettingStarted.mdx b/frontend/src/app/main/ui/GettingStarted.mdx new file mode 100644 index 000000000..85153175d --- /dev/null +++ b/frontend/src/app/main/ui/GettingStarted.mdx @@ -0,0 +1,66 @@ +import { Meta } from "@storybook/blocks"; + + + +# Getting Started + +Welcome! Whether you're a designer or a developer, this guide will help you get started and connect you to the essential resources you need. + +## Table of Contents + +- [Design Resources](#design-resources) + + - [Penpot](#penpot) + - [UI/UX Design Guidelines](#uiux-design-guidelines) + - [Design Assets](#design-assets) + +- [Development Resources](#development-resources) + - [Coding Standards](#coding-standards) + - [Version Control](#version-control) + - [Development Tools](#development-tools) + +--- + +## Design Resources + +### Penpot + +- [Penpot Production Environment](https://www.penpot.app/) +- [Penpot Design Environment](https://www.design.penpot.app/) + +> **Get Access** +> If you're not already part of the Penpot project, request access to your design team. + +### UI/UX Design Guidelines + +Before you dive into designing, familiarize yourself with our UI/UX design guidelines. They provide valuable insights into our design philosophy and standards. + +- [UI/UX Guidelines Document](https://your-design-guidelines-link.com) + +### Design Assets + +All the essential design assets like logos, icons, and brand guidelines can be found in the Penpot project. Ensure you have access and familiarize yourself with these assets for consistency. + +--- + +## Development Resources + +### Coding Standards + +Maintaining a consistent code style is essential for collaborative development. Our coding standards document will guide you on best practices. + +- [Coding Standards Document](https://your-coding-standards-link.com) + +### Version Control + +We use Git for version control. Make sure you have Git installed and are familiar with its basics. + +### Development Tools + +Your development environment is critical. Here are some tools and resources to help you set up your workspace: + +- **Code Editor**: We recommend using [Visual Studio Code](https://code.visualstudio.com/) for development. It's highly customizable and supports a wide range of extensions. + +- **Package Manager**: [npm](https://www.npmjs.com/) is the package manager we use for JavaScript projects. Install it to manage project dependencies. + +--- diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.cljs b/frontend/src/app/main/ui/components/buttons/simple_button.cljs index fb4bdd995..a958395c0 100644 --- a/frontend/src/app/main/ui/components/buttons/simple_button.cljs +++ b/frontend/src/app/main/ui/components/buttons/simple_button.cljs @@ -4,7 +4,6 @@ [rumext.v2 :as mf])) (mf/defc simple-button - {::mf/wrap-props false} - [{:keys [on-click children]}] - [:button {:on-click on-click :class (stl/css :button)} children]) + [{:keys [children]}] + [:button {:class (stl/css :button)} children]) diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.mdx b/frontend/src/app/main/ui/components/buttons/simple_button.mdx index 6c93cc3a2..260eb123c 100644 --- a/frontend/src/app/main/ui/components/buttons/simple_button.mdx +++ b/frontend/src/app/main/ui/components/buttons/simple_button.mdx @@ -1,16 +1,82 @@ -import { Canvas, Meta } from '@storybook/blocks'; -import * as SimpleButtonStories from "./simple_button.stories" +import { Canvas, Meta, Controls } from "@storybook/blocks"; +import * as SimpleButtonStories from "./simple_button.stories"; -# Lorem ipsum +# SimpleButton -This is an example of **markdown** docs within storybook, for the component ``. +A button is a clickable or tap-able UI element representing an action or providing access to a specific function in an app. It has text or an icon indicating its purpose and is commonly used for form submissions, confirmation, or cancellation actions. Clear labeling, proper sizing, ample padding, and spacing contribute to ensuring accessibility and ease of use. -Here's how we can render a simple button: + + + +## Usage + +## Where to use + +The main button highlights the primary action in a context, being visually distinct (e.g., color, size) from others. Users readily identify it as the key means to accomplish tasks. Proper placement, usually at the bottom right corner, ensures consistency and efficient goal completion. + +## When to use + +Utilize the main button for vital actions, highlighting priority and clarity. Keep each view or modal limited to one main button, accompanied by fewer secondary ones if needed. This approach promotes intuitive navigation and seamless user experience. + +## Behavior + +### Interactions + +- **Loading**: Upon engaging with long-lasting (>500ms) tasks, showcase a visible, contrasting loader near the source. Accompany it with brief status updates to keep users informed. + +## Interface + +### Types + +#### Primary + +Used to initiate the main / primary action of a view or flow. Avoid to have more than one primary buttons in the same view or flow. -Simple buttons can also have **icons**: +#### Secondary - \ No newline at end of file +Are the default and most common buttons in the interface. Use them for nor primary actions. + +#### Invisible + +> note: is more common to name this kind of button “gost” or similar. Use them for less prominent, and sometimes independent, actions (examples: add pages, add properties, etc.) + +#### Destructive + +Used for any action that implies remove / delete destroys any object or data. + +### States + +- Rest (default) +- Hover +- Selected (active) +- Focus +- Disabled + +### Variants + +#### Text + +Button label should express what action will occur when the user interacts with it. + + + +#### Icon + +Button icon should depict what action will occur when the user interacts with it + +## Properties + + + +## Tokens + +--avatar-background +--avatar-border + +## Accesibility + +- Alternate text: “Image of [fullName]" diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.scss b/frontend/src/app/main/ui/components/buttons/simple_button.scss index e1d162fbc..1d6731474 100644 --- a/frontend/src/app/main/ui/components/buttons/simple_button.scss +++ b/frontend/src/app/main/ui/components/buttons/simple_button.scss @@ -1,13 +1,4 @@ .button { - font-family: monospace; - display: flex; align-items: center; - column-gap: 0.5rem; - - svg { - width: 16px; - height: 16px; - stroke: #000; - } } diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx b/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx index 33142e12c..8ced151ac 100644 --- a/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx +++ b/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx @@ -1,30 +1,31 @@ import * as React from "react"; import Components from "@target/components"; -import Icons from "@target/icons"; export default { - title: 'Buttons/Simple Button', + title: "Components/Simple Button", component: Components.SimpleButton, + argTypes: { + variant: { + description: "type description", + control: "select", + options: ["primary", "secondary"], + }, + children: { + description: "Call to action", + control: "text", + }, + }, }; export const Default = { - render: () => ( + args: { + children: "call to action", + variant: "primary", + }, + render: (args) => ( - - Simple Button - + {args.children} ), }; - -export const WithIcon = { - render: () => ( - - - {Icons.AddRefactor} - Simple Button - - - ), -}