diff --git a/.storybook/preview.js b/.storybook/preview.js index 807b0b45f2..5339d52c5b 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -47,23 +47,10 @@ export const parameters = { order: [ 'Introduction', 'Style', - ['Color', 'Icons'], + 'Guidelines', + 'Templates', 'Components', - [ - 'Navigation', - 'Button', - 'Chips', - 'Checkbox', - 'Toggle', - 'Dropdown', - 'Input', - 'Selector', - 'Chart', - 'Progress & loading', - 'Table', - 'Notification', - ], - 'Guideline', + ], }, }, diff --git a/stories/areachart.stories.tsx b/stories/areachart.stories.tsx index 367c567a34..c575682d96 100644 --- a/stories/areachart.stories.tsx +++ b/stories/areachart.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { AreaChart } from '../src/lib/components/areachart/AreaChart.component'; import { area_charts } from './data/areachart'; -import { Wrapper, Title } from './common'; +import { Wrapper } from './common'; const xAxis_area_chart = { field: 'time', type: 'temporal', @@ -104,7 +104,7 @@ const area2 = { const areas = [area, area2]; const id_area_chart = 'vis_area_chart'; export default { - title: 'Components/Chart/AreaChart', + title: 'Components/Data Display/Charts/Area Chart', component: AreaChart, decorators: [(story) => {story()}], }; diff --git a/stories/banner.stories.tsx b/stories/banner.stories.tsx index 0b5e38e0ab..02d0e47e5f 100644 --- a/stories/banner.stories.tsx +++ b/stories/banner.stories.tsx @@ -5,7 +5,7 @@ import { Wrapper } from './common'; import { iconOptions } from './controls'; export default { - title: 'Components/Notification/Banner', + title: 'Components/Feedback/Banner', component: Banner, decorators: [(story) => {story()}], args: { diff --git a/stories/barchart.stories.tsx b/stories/barchart.stories.tsx index dc243d38ee..c19ededc22 100644 --- a/stories/barchart.stories.tsx +++ b/stories/barchart.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { BarChart } from '../src/lib/components/barchart/BarChart.component'; -import { Wrapper, Title } from './common'; +import { Wrapper } from './common'; import { verticalStackedData, horizontalStackedData, @@ -9,7 +9,6 @@ import { import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts'; import { Component } from '@storybook/blocks'; -import { minHeight } from 'styled-system'; const width = 800; // the size control the size of each small item of the bar @@ -112,7 +111,7 @@ const horizontalBarChartArgs = { }; export default { - title: 'Components/Chart/BarChart', + title: 'Components/Data Display/Charts/BarChart', component: BarChart, decorators: [ (story: Component) => ( diff --git a/stories/box.stories.tsx b/stories/box.stories.tsx index ebaf33b85e..5ccdc117e6 100644 --- a/stories/box.stories.tsx +++ b/stories/box.stories.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { Box } from '../src/lib/components/box/Box'; const info = { - title: 'Components/Box', + title: 'Components/Styling/Box', component: Box, decorators: [(story) => {story()}], }; diff --git a/stories/breadcrumb.stories.tsx b/stories/breadcrumb.stories.tsx index d02ef51446..392dc4bab9 100644 --- a/stories/breadcrumb.stories.tsx +++ b/stories/breadcrumb.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Breadcrumb } from '../src/lib/components/breadcrumb/Breadcrumb.component'; -import { Wrapper, Title } from './common'; +import { Wrapper } from './common'; export default { title: 'Components/Navigation/Breadcrumb', component: Breadcrumb, diff --git a/stories/buttonv2.stories.tsx b/stories/buttonv2.stories.tsx index e40276c6d9..422b30c2fc 100644 --- a/stories/buttonv2.stories.tsx +++ b/stories/buttonv2.stories.tsx @@ -6,14 +6,19 @@ import { } from '../src/lib/components/buttonv2/Buttonv2.component'; import { Wrapper } from './common'; import { CopyButton } from '../src/lib/next'; -import { Icon } from '../src/lib'; + import { tooltipArgTypes, iconArgType } from './controls'; +import { Form, Icon, Input, Stack } from '../src/lib'; export default { - title: 'Components/v2/Button', + title: 'Components/Button', component: Button, decorators: [ - (story) => {story()}, + (story) => ( + + {story()} + + ), ], args: { onClick: action('Button clicked'), @@ -83,10 +88,49 @@ export const DefaultButtons = { }, }; +export const Primary = { + args: { + variant: 'primary', + label: 'Primary', + }, +}; + +export const Secondary = { + args: { + variant: 'secondary', + label: 'Secondary', + }, +}; + +export const Tertiary = { + args: { + variant: 'outline', + label: 'Tertiary', + }, +}; + +export const SimpleForm = { + render: ({ ...args }) => { + return ( +
+
*/} - Use for the secondary action within a group of buttons. -### Tertiary + -
-
+### Tertiary Dismissive action, such as the cancel button. -```css -color: #313131; /*border*/ -``` + + ### Links -*to add* +_to add_ ## States -*to produce* +_to produce_ ### Disabled button Disabled state only if an action on the current screen can enable it (action possibility). + + ## Placement -* Primary buttons placed on the right of a group. -* Dismissive actions placed on the left. It allows the user to return to the previous screen or step in the process. +- Primary buttons placed on the right of a group. +- Dismissive actions placed on the left. It allows the user to return to the previous screen or step in the process. Align button groups with the container's right side by default; however, based on the use case and visual balance it can be aligned differently. + + ### Button spacing -* Horizontal spacing: 16px -* Vertical spacing: 12px -* Space between 2 buttons: 24px - when there is no space constraint +- Horizontal spacing: 16px +- Vertical spacing: 12px +- Space between 2 buttons: 24px - when there is no space constraint -## Icon & label on buttons +## Icon on buttons ### Which icon @@ -103,29 +126,12 @@ Seeing the icon first help users to scan the page more easily, except for few ca The icon should be (approximately) the same height as the text, or a lot bigger. -### Explicit button label - -Button labels should be as short and clear as possible and should describe the action the button performs.\ -Use one or two words if possible. Remove most prepositions and articles (a, an, the). - -Examples: Cancel, Close, Create, Delete, Edit, Learn more, Review, Save, Study, View scores, etc. + -Since buttons are action points for the user, button text should also be actionable. Stick to using verbs (Complete, Start/Finish, Search) or a simple verb + noun combination for buttons (Next Page, Submit Post, Learn More). Whichever labeling method you choose, maintain consistency across all of your buttons. + -* Use sentence case. -* Capitalize proper nouns. -* Use specific action-oriented text for CTAs. - -Examples: Add Volume, Create Account, Go to Dashboard, Reset Password, Send Reset link, Sign in, etc. +### Playground -Be sure to: - -* Check for consistent use across the UI. -* Reserve enough space for translation to other languages. -* Avoid excessive use of exclamation points (!). - -Don't: + -* Use icons only. -* Use punctuation. -* Write “Click here.” + diff --git a/stories/guideline/chart-guideline.mdx b/stories/guideline/chart-guideline.mdx index f7d82821f5..61097e4d91 100644 --- a/stories/guideline/chart-guideline.mdx +++ b/stories/guideline/chart-guideline.mdx @@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/blocks'; import { ChartExample } from './mdxExampleComponents'; import { SuccessBanner } from '../banner.stories'; - + # Charts @@ -20,11 +20,11 @@ Only use grid lines when it’s helpful. Possible to use only horizontal or vert ### Elements -* Title -* Axis -* Legend +- Title +- Axis +- Legend -*produce an example WIP* +_produce an example WIP_ ## Type @@ -32,24 +32,24 @@ Only use grid lines when it’s helpful. Possible to use only horizontal or vert ### Pie charts -* No more than 6 categories -* Values should be different enough (otherwise select Bar charts) -* Should be a 100% total -* Categories in the desc order +- No more than 6 categories +- Values should be different enough (otherwise select Bar charts) +- Should be a 100% total +- Categories in the desc order -*produce an example WIP* +_produce an example WIP_ -*(Currently, there is no Pie chart in the UI)* +_(Currently, there is no Pie chart in the UI)_ ### Bar and column charts -* Should start at a baseline of zero. -{/* */} +- Should start at a baseline of zero. + {/* */} ### Line charts -* No more than 5–7 different lines -* Avoid randomly chosen color (otherwise risk of contrast issues) +- No more than 5–7 different lines +- Avoid randomly chosen color (otherwise risk of contrast issues) Here, the colors for Get and List are too close. @@ -57,7 +57,7 @@ Components/Chart/LineChart Area charts -* Could be a single area, overlapping area, or stacked area -* Max 3-4 categories +- Could be a single area, overlapping area, or stacked area +- Max 3-4 categories {/* */} diff --git a/stories/healthselectorv2.stories.tsx b/stories/healthselectorv2.stories.tsx index 4ab8519532..9366f7e5f2 100644 --- a/stories/healthselectorv2.stories.tsx +++ b/stories/healthselectorv2.stories.tsx @@ -8,8 +8,10 @@ import { import { Wrapper } from './common'; import { Icon } from '../src/lib/components/icon/Icon.component'; export default { - title: 'Components/v2/Healthselector', - component: HealthSelector, + + title: 'Components/Healthselector', + component: Healthselector, + decorators: [ (story) => ( diff --git a/stories/icon.stories.tsx b/stories/icon.stories.tsx index f2e2f37df3..9f7e2a3203 100644 --- a/stories/icon.stories.tsx +++ b/stories/icon.stories.tsx @@ -18,10 +18,6 @@ export default { }, }; -/** - * #### Subtitle - * This is the description - * */ export const Playground = { args: { name: 'Exclamation-triangle', diff --git a/stories/input.stories.tsx b/stories/input.stories.tsx index 002ce92819..e9ce441355 100644 --- a/stories/input.stories.tsx +++ b/stories/input.stories.tsx @@ -1,9 +1,8 @@ -import React, { useState } from 'react'; -import { Input } from '../src/lib/components/input/Input.component'; +import React from 'react'; import { Input as InputV2 } from '../src/lib/components/inputv2/inputv2'; import { action } from '@storybook/addon-actions'; import styled from 'styled-components'; -import { Wrapper, Title } from './common'; +import { Wrapper } from './common'; const sizes = ['1/3', '1/2', '2/3', '1']; @@ -13,7 +12,7 @@ const InputWrapper = styled.div` `; export default { - title: 'Components/Input/Input', + title: 'Components/Inputs/Input', component: InputV2, decorators: [ (story) => {story()}, diff --git a/stories/lateralnavbarlayout.stories.tsx b/stories/lateralnavbarlayout.stories.tsx index 57763f824e..56463a1e70 100644 --- a/stories/lateralnavbarlayout.stories.tsx +++ b/stories/lateralnavbarlayout.stories.tsx @@ -32,7 +32,7 @@ const sideBarActions = [ ]; export default { - title: 'Components/Navigation/LateralNavbarLayout', + title: 'Templates/LateralNavbarLayout', component: LateralNavbarLayout, args: { children: , diff --git a/stories/layout.stories.tsx b/stories/layout.stories.tsx index 942bdec488..c486c8a7f6 100644 --- a/stories/layout.stories.tsx +++ b/stories/layout.stories.tsx @@ -1,10 +1,7 @@ -import React, { useState } from 'react'; -import { Layout } from '../src/lib/components/layout/Layout.component'; +import React from 'react'; import { Layout as Layout2 } from '../src/lib/components/layout/v2'; import { TwoPanelLayout } from '../src/lib/components/layout/v2/panels'; import { AppContainer } from '../src/lib/components/layout/v2/AppContainer'; -import { Loader } from '../src/lib/components/loader/Loader.component'; -import { action } from '@storybook/addon-actions'; import styled from 'styled-components'; import { Stack } from '../src/lib/spacing'; import { Icon } from '../src/lib/components/icon/Icon.component'; @@ -12,99 +9,10 @@ import { Link, Text } from '../src/lib/components/text/Text.component'; import { TextBadge } from '../src/lib/components/textbadge/TextBadge.component'; import { Breadcrumb } from '../src/lib/components/breadcrumb/Breadcrumb.component'; import { ScrollbarWrapper } from '../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component'; -import { DefaultSidebar } from './sidebar.stories'; import { Meta } from '@storybook/react'; -const sideBarActions = [ - { - label: 'Dashboard', - icon: , - onClick: action('dashboard clicked'), - active: true, - 'data-cy': 'Dashboard', - }, - { - label: 'Servers', - icon: , - onClick: action('server clicked'), - 'data-cy': 'Servers', - }, - { - label: 'Disks', - icon: , - onClick: action('disk clicked'), - 'data-cy': 'Disks', - }, -]; -const rightActions = [ - { - type: 'dropdown', - text: 'FR', - icon: , - items: [ - { - label: 'English', - name: 'EN', - onClick: action('English selected'), - }, - ], - }, - { - type: 'dropdown', - icon: , - items: [ - { - label: 'Hyperdrive UI', - onClick: action('Hyperdrive UI clicked'), - }, - ], - }, - { - type: 'dropdown', - icon: , - items: [ - { - label: 'About', - onClick: action('About clicked'), - }, - { - label: 'Documentation', - onClick: action('Documentation clicked'), - }, - { - label: 'Onboarding', - onClick: action('Onboarding clicked'), - }, - ], - }, - { - type: 'dropdown', - text: 'Carlito', - icon: , - items: [ - { - label: 'Log out', - onClick: action('Logout clicked'), - }, - ], - }, -]; -// const meta: Meta = { -// title: 'Components/Navigation/Layout', -// component: Layout, -// args:{ -// sidebar:{ -// actions: sideBarActions, -// }, -// navbar:{ -// productName: 'Harware UI', -// rightActions, -// } -// } -// }; - const meta: Meta = { - title: 'Components/Navigation/Layout', + title: 'Templates/Layout', component: Layout2, args: {}, }; diff --git a/stories/linechart.stories.tsx b/stories/linechart.stories.tsx index 3b959dbb24..dce407a2c3 100644 --- a/stories/linechart.stories.tsx +++ b/stories/linechart.stories.tsx @@ -252,7 +252,7 @@ const tooltipConfigInOut = { }, }; export default { - title: 'Components/Chart/LineChart', + title: 'Components/Data Display/Charts/LineChart', component: LineChart, decorators: [(story) => {story()}], args: { diff --git a/stories/linecharttemporal.stories.tsx b/stories/linecharttemporal.stories.tsx index 8a121dc32c..a1c204143c 100644 --- a/stories/linecharttemporal.stories.tsx +++ b/stories/linecharttemporal.stories.tsx @@ -10,7 +10,7 @@ import { Wrapper } from './common'; import { dataLineChartV2, dataLineChartV2_readwrite } from './data/linechart'; import { defaultRenderTooltipSerie } from '../src/lib/components/linetemporalchart/tooltip'; export default { - title: 'Components/v2/LineTemporalChart', + title: 'Components/Data Display/Charts/v2/LineTemporalChart', component: LineTemporalChart, decorators: [ (story) => ( diff --git a/stories/modal.stories.tsx b/stories/modal.stories.tsx index 46ea407a9d..468d344001 100644 --- a/stories/modal.stories.tsx +++ b/stories/modal.stories.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Modal } from '../src/lib/components/modal/Modal.component'; import { action } from '@storybook/addon-actions'; import { Wrapper } from './common'; @@ -9,7 +9,7 @@ import { Button } from '../src/lib/components/buttonv2/Buttonv2.component'; import { useArgs } from '@storybook/preview-api'; export default { - title: 'Components/Notification/Modal', + title: 'Components/Feedback/Modal', component: Modal, decorators: [ (story) => {story()}, @@ -81,93 +81,6 @@ export const CustomizeTitle = { }, }; -/* -export const Default = { - render: ({}) => { - return ( - - -