diff --git a/.changeset/empty-trainers-give.md b/.changeset/empty-trainers-give.md new file mode 100644 index 000000000..4ca166275 --- /dev/null +++ b/.changeset/empty-trainers-give.md @@ -0,0 +1,5 @@ +--- +'@ithaka/pharos': patch +--- +Update examples for storybook to align with voice and tone + diff --git a/packages/pharos/src/components/breadcrumb/pharos-breadcrumb.react.stories.mdx b/packages/pharos/src/components/breadcrumb/pharos-breadcrumb.react.stories.mdx index 1a32f60c8..15d43de30 100644 --- a/packages/pharos/src/components/breadcrumb/pharos-breadcrumb.react.stories.mdx +++ b/packages/pharos/src/components/breadcrumb/pharos-breadcrumb.react.stories.mdx @@ -28,9 +28,9 @@ export const Template = (args) => ( {Template()} diff --git a/packages/pharos/src/components/breadcrumb/pharos-breadcrumb.wc.stories.mdx b/packages/pharos/src/components/breadcrumb/pharos-breadcrumb.wc.stories.mdx index 55f2e874a..0b4a8a26d 100644 --- a/packages/pharos/src/components/breadcrumb/pharos-breadcrumb.wc.stories.mdx +++ b/packages/pharos/src/components/breadcrumb/pharos-breadcrumb.wc.stories.mdx @@ -27,9 +27,9 @@ export const Template = (args) => diff --git a/packages/pharos/src/components/combobox/PharosCombobox.react.stories.mdx b/packages/pharos/src/components/combobox/PharosCombobox.react.stories.mdx index 16a23beb9..49c0ac34f 100644 --- a/packages/pharos/src/components/combobox/PharosCombobox.react.stories.mdx +++ b/packages/pharos/src/components/combobox/PharosCombobox.react.stories.mdx @@ -31,18 +31,19 @@ export const Template = (args) => ( hideLabel={args.hideLabel} > {args.label} - - - - - - - - - - - - + + + + + + + + + + + + + ); @@ -50,7 +51,7 @@ export const Template = (args) => ( ( }} > action('Change')(e.target.value)} onInput={(e) => action('Input')(e.target.value)} > - I fire events on input - - - - - - - - - - - - + Events fire on selection + + + + + + + + + + + + + ); @@ -152,7 +154,7 @@ export const Template = (args) => ( {() => { return ( - + I'm searching for diff --git a/packages/pharos/src/components/combobox/pharos-combobox.wc.stories.mdx b/packages/pharos/src/components/combobox/pharos-combobox.wc.stories.mdx index 642788100..4b7ab8b8f 100644 --- a/packages/pharos/src/components/combobox/pharos-combobox.wc.stories.mdx +++ b/packages/pharos/src/components/combobox/pharos-combobox.wc.stories.mdx @@ -34,20 +34,19 @@ export const Template = (args) => ?required=${args.required} > ${args.label} - - - - - - - - - - - - - - + + + + + + + + + + + + + `; @@ -58,7 +57,7 @@ export const Template = (args) => open: false, disabled: false, hideLabel: false, - label: 'I choose you', + label: 'Combobox Label', }} > {Template.bind({})} @@ -122,27 +121,24 @@ export const Template = (args) => style="display: grid; display: -ms-grid; grid-gap: 1rem; grid-template-columns: 300px; -ms-grid-columns: 300px" > - I fire events on input - - - - - - - - - - - - - - - - + Events fire on selection + + + + + + + + + + + + + `; @@ -156,7 +152,7 @@ export const Template = (args) => {() => { return html` - + I'm searching for diff --git a/packages/pharos/src/components/dropdown-menu-nav/PharosDropdownMenuNav.react.stories.mdx b/packages/pharos/src/components/dropdown-menu-nav/PharosDropdownMenuNav.react.stories.mdx index dd571f8e9..e479e374c 100644 --- a/packages/pharos/src/components/dropdown-menu-nav/PharosDropdownMenuNav.react.stories.mdx +++ b/packages/pharos/src/components/dropdown-menu-nav/PharosDropdownMenuNav.react.stories.mdx @@ -19,35 +19,35 @@ import { PharosLink } from '../../react-components/link/pharos-link'; - Smurfs + Category 1 - - Papa - Clumsy - Smurfette + + Item 1.1 + Item 1.2 + Item 1.3 - Ninja Turtles + Category 2 - - Leonardo - Donatello - Raphael - Michelangelo + + Item 2.1 + Item 2.2 + Item 2.3 + Item 2.4 - Link to Other + Link diff --git a/packages/pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav.wc.stories.mdx b/packages/pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav.wc.stories.mdx index 75f48fd13..bbf526615 100644 --- a/packages/pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav.wc.stories.mdx +++ b/packages/pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav.wc.stories.mdx @@ -20,33 +20,33 @@ import '../link/pharos-link'; SmurfsCategory 1 - - Papa - Clumsy - Smurfette + + Item 1.1 + Item 1.2 + Item 1.3 Ninja TurtlesCategory 2 - - Leonardo - Donatello - Raphael - Michelangelo + + Item 2.1 + Item 2.2 + Item 2.3 + Item 2.4 Link to OtherLink `; diff --git a/packages/pharos/src/components/dropdown-menu/PharosDropdownMenu.react.stories.mdx b/packages/pharos/src/components/dropdown-menu/PharosDropdownMenu.react.stories.mdx index b06738b65..abb1eee43 100644 --- a/packages/pharos/src/components/dropdown-menu/PharosDropdownMenu.react.stories.mdx +++ b/packages/pharos/src/components/dropdown-menu/PharosDropdownMenu.react.stories.mdx @@ -131,24 +131,20 @@ import { PharosButton } from '../../react-components/button/pharos-button'; - House Stark - Winterfell, Capital of the Kingdom of the North + Item 1Description for item 1 - House Lannister - Casterly Rock, Capital of the Westerlands + Item 2Description for item 2 - House Targaryen - King's Landing, Capital of the Seven Kingdoms + Item 3Description for item 3 - House Tyrell - Highgarden, Capital of the Reach + Item 4Description for item 4 - House Martell - Sunspear, Capital of Dorne + Disabled + This item has been disabled @@ -175,15 +171,13 @@ import { PharosButton } from '../../react-components/button/pharos-button'; With attribute fullWidth to match the width of the trigger - Oh, supercalifragilisticexpialidocious! - - Even though the sound of it is something quite atrocious - + Use full-width to display lengthy text - If you say it loud enough you'll always sound precocious + Even if longer text is placed in the item, it will span multiple lines to keep the width + of the item the same size as the trigger @@ -244,14 +238,11 @@ import { PharosButton } from '../../react-components/button/pharos-button'; Click Me - Never gonna give you up - Never gonna let you down - - Never gonna run around and desert you - - Never gonna make you cry - Never gonna say goodbye - Never gonna tell a lie and hurt you + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 - House Stark - Winterfell, Capital of the Kingdom of the North + Item 1 + Description for item 1 - House Lannister - Casterly Rock, Capital of the Westerlands + Item 2 + Description for item 2 + + + Item 3 + Description for item 3 - House TargaryenKing's Landing, Capital of the Seven Kingdoms - House Tyrell - Highgarden, Capital of the Reach + Item 4 + Description for item 4 - House Martell - Sunspear, Capital of Dorne + Disabled + This item has been disabled @@ -192,18 +191,14 @@ import '../button/pharos-button'; - Oh, supercalifragilisticexpialidocious! + Use full-width to display lengthy text - Even though the sound of it is something quite atrocious + + Even if longer text is placed in the item, it will span multiple lines to keep the + width of the item the same size as the trigger + - If you say it loud enough you'll always sound precocious `; @@ -272,16 +267,11 @@ import '../button/pharos-button'; Click Me - Never gonna give you up - Never gonna let you down - Never gonna run around and desert you - Never gonna make you cry - Never gonna say goodbye - Never gonna tell a lie and hurt you + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 - Hi there! As you can see, I am still loading + Loading spinner demonstration action('Click')('Clicked')}>Can't press me! diff --git a/packages/pharos/src/components/loading-spinner/pharos-loading-spinner.wc.stories.mdx b/packages/pharos/src/components/loading-spinner/pharos-loading-spinner.wc.stories.mdx index ebe768476..214d3a136 100644 --- a/packages/pharos/src/components/loading-spinner/pharos-loading-spinner.wc.stories.mdx +++ b/packages/pharos/src/components/loading-spinner/pharos-loading-spinner.wc.stories.mdx @@ -22,9 +22,7 @@ import '../link/pharos-link'; {html` - Hi there! As you can see, I am still loading + Loading spinner demonstration Can't press me! `} diff --git a/packages/pharos/src/components/modal/PharosModal.react.stories.mdx b/packages/pharos/src/components/modal/PharosModal.react.stories.mdx index 86ab7ade2..93d6cbaaa 100644 --- a/packages/pharos/src/components/modal/PharosModal.react.stories.mdx +++ b/packages/pharos/src/components/modal/PharosModal.react.stories.mdx @@ -106,12 +106,12 @@ export const Template = (args) => ( onPharos-Modal-Close={(e) => action('Close')(e.detail)} onPharos-Modal-Closed={(e) => action('Closed')(e.detail)} > -

I describe the modal content

+

Description for the modal

Name - Quest + User ID Favorite Color diff --git a/packages/pharos/src/components/modal/pharos-modal.wc.stories.mdx b/packages/pharos/src/components/modal/pharos-modal.wc.stories.mdx index ddc01e3c4..d98d3c487 100644 --- a/packages/pharos/src/components/modal/pharos-modal.wc.stories.mdx +++ b/packages/pharos/src/components/modal/pharos-modal.wc.stories.mdx @@ -114,12 +114,12 @@ export const Template = (args) => @pharos-modal-close="${(e) => action('Close')(e.detail)}" @pharos-modal-closed="${(e) => action('Closed')(e.detail)}" > -

I describe the modal content

+

Description for the modal

Name - Quest + User ID Favorite Color diff --git a/packages/pharos/src/components/radio-button/PharosRadioButton.react.stories.mdx b/packages/pharos/src/components/radio-button/PharosRadioButton.react.stories.mdx index 055a50d59..0d71fd877 100644 --- a/packages/pharos/src/components/radio-button/PharosRadioButton.react.stories.mdx +++ b/packages/pharos/src/components/radio-button/PharosRadioButton.react.stories.mdx @@ -34,7 +34,7 @@ export const Template = (args) => ( ( {html`
- Radio Button 1 + Default Radio Button
Disabled input @@ -114,7 +114,7 @@ export const Template = (args) => I am the panel for tab 2 but listed 1st in the DOM I am the panel for tab 3 but listed 2rd in the DOMI am the panel for tab 3 but listed 2nd in the DOM I am the panel for tab 1 but listed 3rd in the DOM ( readonly: false, value: '', hideLabel: false, - label: 'Edit my attributes', + label: 'Edit attributes via control panel', }} > {Template.bind({})} diff --git a/packages/pharos/src/components/text-input/pharos-text-input.wc.stories.mdx b/packages/pharos/src/components/text-input/pharos-text-input.wc.stories.mdx index 5d837fcee..47a11a135 100644 --- a/packages/pharos/src/components/text-input/pharos-text-input.wc.stories.mdx +++ b/packages/pharos/src/components/text-input/pharos-text-input.wc.stories.mdx @@ -31,6 +31,10 @@ export const Template = (args) => ?invalidated="${args.invalidated}" ?required="${args.required}" .message="${args.message}" + .placeholder=${args.placeholder} + ?disabled=${args.disabled} + ?readonly=${args.readonly} + .value=${args.value} > ${args.label} @@ -61,32 +65,21 @@ export const Template = (args) => # States - - {html` -
- I am empty - I am disabled - I am read-only - I have a placeholder - I have a value provided - My label is hidden - I am valid -
- `} + + {Template.bind({})} diff --git a/packages/pharos/src/components/textarea/PharosTextarea.react.stories.mdx b/packages/pharos/src/components/textarea/PharosTextarea.react.stories.mdx index 62c22b851..7f38bfe1d 100644 --- a/packages/pharos/src/components/textarea/PharosTextarea.react.stories.mdx +++ b/packages/pharos/src/components/textarea/PharosTextarea.react.stories.mdx @@ -34,6 +34,7 @@ export const Template = (args) => ( invalidated={args.invalidated} message={args.message} placeholder={args.placeholder} + resize={args.resize} readonly={args.readonly} required={args.required} rows={args.rows} @@ -69,61 +70,24 @@ export const Template = (args) => ( - -
- - I am empty - - - I am disabled - - - I am read-only - - - I have a placeholder - - - I have a value provided - - - I can't be resized - -
+ + {Template.bind({})} diff --git a/packages/pharos/src/components/textarea/pharos-textarea.wc.stories.mdx b/packages/pharos/src/components/textarea/pharos-textarea.wc.stories.mdx index 1114e17db..e79f16cce 100644 --- a/packages/pharos/src/components/textarea/pharos-textarea.wc.stories.mdx +++ b/packages/pharos/src/components/textarea/pharos-textarea.wc.stories.mdx @@ -33,8 +33,8 @@ export const Template = (args) => .placeholder=${args.placeholder} .resize="${ifDefined(args.resize)}" ?readonly=${args.readonly} - .rows="${args.rows}" ?required=${args.required} + .rows="${args.rows}" ?validated=${args.validated} .value=${args.value} > @@ -65,29 +65,24 @@ export const Template = (args) => # States - - {html` -
- I am empty - I am disabled - I am read-only - I have a placeholder - I have a value provided - I can't be resized -
- `} + + {Template.bind({})} diff --git a/packages/pharos/src/components/toast/PharosToast.react.stories.mdx b/packages/pharos/src/components/toast/PharosToast.react.stories.mdx index d1df1827d..4dcfe1157 100644 --- a/packages/pharos/src/components/toast/PharosToast.react.stories.mdx +++ b/packages/pharos/src/components/toast/PharosToast.react.stories.mdx @@ -1,4 +1,5 @@ import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks'; +import { useEffect } from 'react'; import { PharosToast } from '../../react-components/toast/pharos-toast'; import { PharosToaster } from '../../react-components/toast/pharos-toaster'; @@ -64,3 +65,40 @@ import { PharosLink } from '../../react-components/link/pharos-link'; + +## Long Content Toast + + + + {() => { + const effect = () => { + useEffect(() => { + setTimeout(() => { + document.querySelector('#long-toast-button').click(); + }, 300); + }); + }; + effect(); + return ( + <> + { + console.log('test'); + const event = new CustomEvent('pharos-toast-open', { + detail: { + content: + 'This is a notification for longer content, which may even include a link.', + }, + }); + document.dispatchEvent(event); + }} + > + Click to me see a long name + + + + ); + }} + + diff --git a/packages/pharos/src/components/toast/pharos-toast.wc.stories.mdx b/packages/pharos/src/components/toast/pharos-toast.wc.stories.mdx index c48afe54e..5a3aa582e 100644 --- a/packages/pharos/src/components/toast/pharos-toast.wc.stories.mdx +++ b/packages/pharos/src/components/toast/pharos-toast.wc.stories.mdx @@ -99,7 +99,7 @@ import '../link/pharos-link'; const event = new CustomEvent('pharos-toast-open', { detail: { content: - 'The item has moved to Looooooooooooooooooooooooooooooooooooooooooong.', + 'This is a notification for longer content, which may even include a link.', }, }); document.dispatchEvent(event); diff --git a/packages/pharos/src/components/tooltip/PharosTooltip.react.stories.mdx b/packages/pharos/src/components/tooltip/PharosTooltip.react.stories.mdx index 444bf9583..d977d9d2d 100644 --- a/packages/pharos/src/components/tooltip/PharosTooltip.react.stories.mdx +++ b/packages/pharos/src/components/tooltip/PharosTooltip.react.stories.mdx @@ -1,5 +1,7 @@ import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks'; +import { PharosDropdownMenu } from '../../react-components/dropdown-menu/pharos-dropdown-menu'; +import { PharosDropdownMenuItem } from '../../react-components/dropdown-menu/pharos-dropdown-menu-item'; import { PharosTooltip } from '../../react-components/tooltip/pharos-tooltip'; import { PharosButton } from '../../react-components/button/pharos-button'; import { PharosLink } from '../../react-components/link/pharos-link'; @@ -180,7 +182,7 @@ export const Template = (args) => ( args={{ targetText: 'Hover here to see a tooltip that is as wide as me. If you resize the window while its open, its width will continue to match mine!', - tooltipText: `Now, this is a story all about how my life got flipped-turned upside down and I'd like to take a minute just sit right there I'll tell you how I became the prince of a town called Bel Air`, + tooltipText: `When using the fullWidth attribute, the display of the tooltip will always be the size of the button that triggers the tooltip, regardless of the length of the text.`, id: 'my-full-tooltip', }} argTypes={{ @@ -215,3 +217,30 @@ export const Template = (args) => (
+ +# Custom Boundary + + + +
+ + Click Me + + + Menu item 1 + Menu item 2 + Hover on Me + + this is a very long tooltip but I stay in the dropdown menu's boundary!!! + + +
+ + diff --git a/packages/pharos/src/components/tooltip/pharos-tooltip.wc.stories.mdx b/packages/pharos/src/components/tooltip/pharos-tooltip.wc.stories.mdx index ebd31ad9c..fb75a6787 100644 --- a/packages/pharos/src/components/tooltip/pharos-tooltip.wc.stories.mdx +++ b/packages/pharos/src/components/tooltip/pharos-tooltip.wc.stories.mdx @@ -175,7 +175,7 @@ export const Template = (args) => { args={{ targetText: 'Hover here to see a tooltip that is as wide as me. If you resize the window while its open, its width will continue to match mine!', - tooltipText: `Now, this is a story all about how my life got flipped-turned upside down and I'd like to take a minute just sit right there I'll tell you how I became the prince of a town called Bel Air`, + tooltipText: `When using the fullWidth attribute, the display of the tooltip will always be the size of the button that triggers the tooltip, regardless of the length of the text.`, id: 'my-full-tooltip', }} argTypes={{ @@ -221,11 +221,11 @@ export const Template = (args) => { Menu item 1 Menu item 2 Hover on Me!!!!!!Hover on Me this is a very long tooltip but I stay in the dropdown menu's - boundary!!!Even very long tooltips, such as this one, will stay within the boundaries of the + Tooltip. diff --git a/packages/pharos/src/styles/typography.react.stories.mdx b/packages/pharos/src/styles/typography.react.stories.mdx index 3f64f5ea6..4b5b24b08 100644 --- a/packages/pharos/src/styles/typography.react.stories.mdx +++ b/packages/pharos/src/styles/typography.react.stories.mdx @@ -10,13 +10,7 @@ import { Fragment } from 'react'; # Examples -export const theirNames = [ - 'Claudette Colvin', - 'Maude Ballou', - 'Diane Nash', - 'Rev. Dr. Pauli Murray', - 'Mamie Till Mobley', -]; +export const theirNames = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']; export const list = ( {theirNames.map((name, index) => { @@ -28,30 +22,33 @@ export const list = ( export const PlainTemplate = (args) => {args.text}; export const BringAttentionTemplate = (args) => ( -

- To show the power of {args.text}, I sawed this boat in half! And repaired it with only{' '} - {args.text}! -

+ + This is an example of how to bring attention to {args.text}. + ); export const StrongTemplate = (args) => ( - What does the scouter say about his power level? {args.text} + This is an example of {args.text}. ); -export const SmallTemplate = (args) => {args.text}; +export const SmallTemplate = (args) => ( + + This is an example of {args.text} + +); export const IdiomaticTemplate = (args) => ( -

+ {args.text} is a beacon leading ships safely toward our collective knowledge. -

+ ); export const EmphasisTemplate = (args) => ( -

- You {args.text} the truth! -

+ + This is an example of {args.text}. + ); export const TableTemplate = (args) => ( @@ -63,13 +60,13 @@ export const TableTemplate = (args) => ( - Sugar + Item 1 - Spice + Item 2 - Everything Nice + Item 3 @@ -84,21 +81,15 @@ export const ListNoBulletsTemplate = () => @@ -110,7 +101,7 @@ export const InlineListTemplate = () =>