From 663c672a29decc6d2ffed8c7cbf061c9774a89b4 Mon Sep 17 00:00:00 2001 From: jgresham Date: Thu, 22 Sep 2022 19:54:00 -0700 Subject: [PATCH 1/2] check-in before fixing buttons --- .../Generics/redesign/Stepper/Stepper.tsx | 31 +++++++++++++ .../Generics/redesign/Stepper/stepper.css.ts | 44 +++++++++++++++++++ src/stories/Stepper.stories.tsx | 25 +++++++++++ 3 files changed, 100 insertions(+) create mode 100644 src/renderer/Generics/redesign/Stepper/Stepper.tsx create mode 100644 src/renderer/Generics/redesign/Stepper/stepper.css.ts create mode 100644 src/stories/Stepper.stories.tsx diff --git a/src/renderer/Generics/redesign/Stepper/Stepper.tsx b/src/renderer/Generics/redesign/Stepper/Stepper.tsx new file mode 100644 index 000000000..4fa72db07 --- /dev/null +++ b/src/renderer/Generics/redesign/Stepper/Stepper.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Button } from '../Button'; +import { bottomBar, previousButton, nextButton } from './stepper.css'; + +export interface StepperProps { + /** + * When a step changes ('prev' or 'next') + */ + onChange?: (change: string) => void; + /** + * The current step component to show + */ + children?: React.ReactNode; +} + +const Stepper = ({ onChange, children }: StepperProps) => { + return ( +
+ {children} +
+ + +
+
+ ); +}; +export default Stepper; diff --git a/src/renderer/Generics/redesign/Stepper/stepper.css.ts b/src/renderer/Generics/redesign/Stepper/stepper.css.ts new file mode 100644 index 000000000..6cc6b53e5 --- /dev/null +++ b/src/renderer/Generics/redesign/Stepper/stepper.css.ts @@ -0,0 +1,44 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '../theme.css'; + +export const bottomBar = style({ + height: 60, + borderTop: '1px solid', + borderColor: vars.color.font10, + display: 'flex', + justifyContent: 'space-between', +}); + +export const previousButton = style({ + boxSizing: 'border-box', + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + padding: '8px 12px', + gap: '10px', + width: '78px', + height: '32px', + marginLeft: '14px', + marginTop: '14px', +}); + +export const nextButton = style({ + boxSizing: 'border-box', + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + padding: '8px 12px', + gap: '10px', + width: '78px', + height: '32px', + marginRight: '14px', + marginTop: '14px', +}); + +export const titleFont = style({ + fontWeight: 600, + fontSize: 15, + lineHeight: '20px', +}); diff --git a/src/stories/Stepper.stories.tsx b/src/stories/Stepper.stories.tsx new file mode 100644 index 000000000..a72c8e56b --- /dev/null +++ b/src/stories/Stepper.stories.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +import Stepper from '../renderer/Generics/redesign/Stepper/Stepper'; +import {Bubble} from '../renderer/Generics/redesign/Bubble' + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'Example/Stepper', + component: Stepper, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + }, +} 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 = { + onChange: (change) => window.alert(change), + children: +} From ca9f7b1413d6a5195c87e7945bd1c0f8cc0702c7 Mon Sep 17 00:00:00 2001 From: jgresham Date: Fri, 23 Sep 2022 14:19:50 -0700 Subject: [PATCH 2/2] use styled Button components in Stepper --- .../Generics/redesign/Stepper/Stepper.tsx | 14 ++++---- .../Generics/redesign/Stepper/stepper.css.ts | 36 +++++++++---------- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/renderer/Generics/redesign/Stepper/Stepper.tsx b/src/renderer/Generics/redesign/Stepper/Stepper.tsx index 4fa72db07..0ea6d1d82 100644 --- a/src/renderer/Generics/redesign/Stepper/Stepper.tsx +++ b/src/renderer/Generics/redesign/Stepper/Stepper.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { bottomBar, previousButton, nextButton } from './stepper.css'; export interface StepperProps { @@ -18,12 +18,12 @@ const Stepper = ({ onChange, children }: StepperProps) => {
{children}
- - +
+
+
+
); diff --git a/src/renderer/Generics/redesign/Stepper/stepper.css.ts b/src/renderer/Generics/redesign/Stepper/stepper.css.ts index 6cc6b53e5..88b361af9 100644 --- a/src/renderer/Generics/redesign/Stepper/stepper.css.ts +++ b/src/renderer/Generics/redesign/Stepper/stepper.css.ts @@ -10,29 +10,29 @@ export const bottomBar = style({ }); export const previousButton = style({ - boxSizing: 'border-box', - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - padding: '8px 12px', - gap: '10px', - width: '78px', - height: '32px', + // boxSizing: 'border-box', + // display: 'flex', + // flexDirection: 'row', + // justifyContent: 'center', + // alignItems: 'center', + // padding: '8px 12px', + // gap: '10px', + // width: '78px', + // height: '32px', marginLeft: '14px', marginTop: '14px', }); export const nextButton = style({ - boxSizing: 'border-box', - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - padding: '8px 12px', - gap: '10px', - width: '78px', - height: '32px', + // boxSizing: 'border-box', + // display: 'flex', + // flexDirection: 'row', + // justifyContent: 'center', + // alignItems: 'center', + // padding: '8px 12px', + // gap: '10px', + // width: '78px', + // height: '32px', marginRight: '14px', marginTop: '14px', });