Skip to content

Commit

Permalink
chore(storybook): update controls modal number-input and date-picker (#…
Browse files Browse the repository at this point in the history 
…12011)

* chore(date-picker): add controls and update playground

* chore(number-input): add controls and update playground

* chore(storybook): update story code

* chore(modal): add storybook controls

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@aledavila @kodiakhq
aledavila and kodiakhq[bot] authored Sep 7, 2022
1 parent 7cf0359 commit b8a925c
Show file tree
Hide file tree
Showing 5 changed files with 296 additions and 361 deletions.
274 changes: 69 additions & 205 deletions packages/react/src/components/ComposedModal/ComposedModal.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,6 @@

import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { action } from '@storybook/addon-actions';
import {
boolean,
object,
optionsKnob as options,
select,
text,
withKnobs,
} from '@storybook/addon-knobs';
import ComposedModal, { ModalBody } from './ComposedModal';
import { ModalHeader } from './ModalHeader';
import { ModalFooter } from './ModalFooter';
Expand All @@ -25,162 +16,6 @@ import TextInput from '../TextInput';
import Button from '../Button';
import mdx from './ComposedModal.mdx';

const sizes = {
'Extra small (xs)': 'xs',
'Small (sm)': 'sm',
'Medium (md)': 'md',
'Large (lg)': 'lg',
};

const buttons = {
'None (0)': '0',
'One (1)': '1',
'Two (2)': '2',
'Three (3)': '3',
};

const props = {
composedModal: () => ({
numberOfButtons: options('Number of Buttons', buttons, '2', {
display: 'inline-radio',
}),
open: boolean('Open (open in <ComposedModal>)', true),
onKeyDown: action('onKeyDown'),
selectorPrimaryFocus: text(
'Primary focus element selector (selectorPrimaryFocus)',
'[data-modal-primary-focus]'
),
size: select('Size (size)', sizes, 'md'),
preventCloseOnClickOutside: boolean(
'Prevent closing on click outside of modal (preventCloseOnClickOutside)',
true
),
}),
modalHeader: ({ titleOnly } = {}) => ({
label: text('Optional Label (label in <ModalHeader>)', 'Label'),
title: text(
'Optional title (title in <ModalHeader>)',
titleOnly
? `
Passive modal title as the message. Should be direct and 3 lines or less.
`.trim()
: 'Modal heading'
),
iconDescription: text(
'Close icon description (iconDescription in <ModalHeader>)',
'Close'
),
buttonOnClick: action('buttonOnClick'),
}),
modalBody: () => ({
hasScrollingContent: boolean(
'Modal contains scrollable content (hasScrollingContent)',
false
),
'aria-label': text('ARIA label for content', 'Example modal content'),
}),
modalFooter: (numberOfButtons) => {
const secondaryButtons = () => {
switch (numberOfButtons) {
case '2':
return {
secondaryButtonText: text(
'Secondary button text (secondaryButtonText in <ModalFooter>)',
'Secondary button'
),
};
case '3':
return {
secondaryButtons: object(
'Secondary button config array (secondaryButtons)',
[
{
buttonText: 'Keep both',
onClick: action('onClick'),
},
{
buttonText: 'Rename',
onClick: action('onClick'),
},
]
),
};
default:
return null;
}
};
return {
danger: boolean('Primary button danger (danger)', false),
primaryButtonText: text(
'Primary button text (primaryButtonText in <ModalFooter>)',
'Primary button'
),
primaryButtonDisabled: boolean(
'Primary button disabled (primaryButtonDisabled in <ModalFooter>)',
false
),
...secondaryButtons(numberOfButtons),
onRequestClose: () => action('onRequestClose')(),
onRequestSubmit: () => action('onRequestSubmit')(),
};
},
};

const scrollingContent = (
<>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
</>
);

export default {
title: 'Components/ComposedModal',
component: ComposedModal,
Expand All @@ -189,49 +24,13 @@ export default {
ModalBody,
ModalFooter,
},
decorators: [withKnobs],
parameters: {
docs: {
page: mdx,
},
},
};

export const Playground = () => {
const { size, numberOfButtons, ...rest } = props.composedModal();
const { hasScrollingContent } = props.modalBody();
return (
<ComposedModal {...rest} size={size || undefined}>
<ModalHeader {...props.modalHeader()} />
<ModalBody
{...props.modalBody()}
aria-label={hasScrollingContent ? 'Modal content' : undefined}>
<p style={{ marginBottom: '1rem' }}>
Custom domains direct requests for your apps in this Cloud Foundry
organization to a URL that you own. A custom domain can be a shared
domain, a shared subdomain, or a shared domain and host.
</p>
<TextInput
data-modal-primary-focus
id="text-input-1"
labelText="Domain name"
placeholder="e.g. github.com"
style={{ marginBottom: '1rem' }}
/>
<Select id="select-1" defaultValue="us-south" labelText="Region">
<SelectItem value="us-south" text="US South" />
<SelectItem value="us-east" text="US East" />
</Select>
<br />
{hasScrollingContent && scrollingContent}
</ModalBody>
{numberOfButtons > 0 && (
<ModalFooter {...props.modalFooter(numberOfButtons)}></ModalFooter>
)}
</ComposedModal>
);
};

export const Default = () => {
return (
<ComposedModal open>
Expand Down Expand Up @@ -259,10 +58,6 @@ export const Default = () => {
);
};

Default.story = {
name: 'Composed Modal',
};

export const PassiveModal = () => {
return (
<ComposedModal open>
Expand Down Expand Up @@ -336,3 +131,72 @@ export const WithStateManager = () => {
</ModalStateManager>
);
};

export const Playground = (args) => {
return (
<ComposedModal open {...args}>
<ModalHeader
label="Account resources"
title="Add a custom domain"
{...args}
/>
<ModalBody>
<p style={{ marginBottom: '1rem' }}>
Custom domains direct requests for your apps in this Cloud Foundry
organization to a URL that you own. A custom domain can be a shared
domain, a shared subdomain, or a shared domain and host.
</p>
<TextInput
data-modal-primary-focus
id="text-input-1"
labelText="Domain name"
placeholder="e.g. github.com"
style={{ marginBottom: '1rem' }}
/>
<Select id="select-1" defaultValue="us-south" labelText="Region">
<SelectItem value="us-south" text="US South" />
<SelectItem value="us-east" text="US East" />
</Select>
</ModalBody>
<ModalFooter
primaryButtonText="Add"
secondaryButtonText="Cancel"
{...args}
/>
</ComposedModal>
);
};

Playground.argTypes = {
children: {
table: {
disable: true,
},
},
className: {
table: {
disable: true,
},
},
containerClassName: {
table: {
disable: true,
},
},
onClose: {
action: 'clicked',
},
onKeyDown: {
action: 'clicked',
},
selectorPrimaryFocus: {
table: {
disable: true,
},
},
selectorsFloatingMenus: {
table: {
disable: true,
},
},
};
4 changes: 4 additions & 0 deletions packages/react/src/components/DatePicker/DatePicker.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ picker is best to use. Each picker’s format can be customized depending on
location or need. The `DatePicker` component expects a `DatePickerInput` as a
child.

<Preview>
<Story id="components-datepicker--playground" />
</Preview>

### Simple DatePicker

The simple date input provides the user with only a text field in which they can
Expand Down
Loading

0 comments on commit b8a925c

Please sign in to comment.