docs(pharos): update storybook examples to align with voice and tone (#…

…18)
ithaka · May 18, 2021 · 3d6e99c · 3d6e99c
1 parent 8c4bd58
commit 3d6e99c
Show file tree

Hide file tree

Showing 26 changed files with 331 additions and 354 deletions.
diff --git a/.changeset/empty-trainers-give.md 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
@@ -28,9 +28,9 @@ export const Template = (args) => (
   <Story
     name="Base"
     args={{
-      firstCrumb: 'Mouse Over to See the Full Text of Long Content Which Are Truncated',
-      secondCrumb: 'Short Texts Will Not',
-      thirdCrumb: 'The Current Place',
+      firstCrumb: 'Hover to see the full text of long content, which are truncated',
+      secondCrumb: 'Short texts will not',
+      thirdCrumb: 'Current',
     }}
   >
     {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
@@ -27,9 +27,9 @@ export const Template = (args) =>
 <Canvas>
   <Story
     args={{
-      firstCrumb: 'Mouse Over to See the Full Text of Long Content Which Are Truncated',
-      secondCrumb: 'Short Texts Will Not',
-      thirdCrumb: 'The Current Place',
+      firstCrumb: 'Hover to see the full text of long content, which are truncated',
+      secondCrumb: 'Short texts will not',
+      thirdCrumb: 'Current',
     }}
     name="Base"
   >

diff --git a/packages/pharos/src/components/combobox/PharosCombobox.react.stories.mdx b/packages/pharos/src/components/combobox/PharosCombobox.react.stories.mdx
@@ -31,26 +31,27 @@ export const Template = (args) => (
     hideLabel={args.hideLabel}
   >
     <span slot="label">{args.label}</span>
-    <option value="1">Bulbasaur</option>
-    <option value="2">Charmander</option>
-    <option value="3">Squirtle</option>
-    <option value="4">Caterpie</option>
-    <option value="5">Weedle</option>
-    <option value="6">Pidgey</option>
-    <option value="7">Rattata</option>
-    <option value="8">Spearow</option>
-    <option value="9">Ekans</option>
-    <option value="10">Pikachu</option>
-    <option value="11">Sandshrew</option>
-    <option value="12">Clefairy</option>
+    <option value="1">New Hampshire</option>
+    <option value="2">Massachusetts</option>
+    <option value="3">Connecticut</option>
+    <option value="4">Rhode Island</option>
+    <option value="5">New York</option>
+    <option value="6">New Jersey</option>
+    <option value="7">Pennsylvania</option>
+    <option value="8">Delaware</option>
+    <option value="9">Maryland</option>
+    <option value="10">Virginia</option>
+    <option value="11">North Carolina</option>
+    <option value="12">South Carolina</option>
+    <option value="13">Georgia</option>
   </PharosCombobox>
 );
 
 <Canvas withToolbar>
   <Story
     name="Base"
     args={{
-      label: 'I am a label',
+      label: 'Combobox Label',
       value: '',
       name: '',
       placeholder: '',
@@ -122,23 +123,24 @@ export const Template = (args) => (
           }}
         >
           <PharosCombobox
-            placeholder="Enter some text"
+            placeholder="Select a state"
             onChange={(e) => action('Change')(e.target.value)}
             onInput={(e) => action('Input')(e.target.value)}
           >
-            <span slot="label">I fire events on input</span>
-            <option value="1">Bulbasaur</option>
-            <option value="2">Charmander</option>
-            <option value="3">Squirtle</option>
-            <option value="4">Caterpie</option>
-            <option value="5">Weedle</option>
-            <option value="6">Pidgey</option>
-            <option value="7">Rattata</option>
-            <option value="8">Spearow</option>
-            <option value="9">Ekans</option>
-            <option value="10">Pikachu</option>
-            <option value="11">Sandshrew</option>
-            <option value="12">Clefairy</option>
+            <span slot="label">Events fire on selection</span>
+            <option value="NH">New Hampshire</option>
+            <option value="MA">Massachusetts</option>
+            <option value="CT">Connecticut</option>
+            <option value="RI">Rhode Island</option>
+            <option value="NY">New York</option>
+            <option value="NJ">New Jersey</option>
+            <option value="PA">Pennsylvania</option>
+            <option value="DE">Delaware</option>
+            <option value="MD">Maryland</option>
+            <option value="VA">Virginia</option>
+            <option value="NC">North Carolina</option>
+            <option value="SC">South Carolina</option>
+            <option value="GA">Georgia</option>
           </PharosCombobox>
         </div>
       );
@@ -152,7 +154,7 @@ export const Template = (args) => (
   <Story name="Search Mode">
     {() => {
       return (
-        <PharosCombobox placeholder="Search for things" searchMode>
+        <PharosCombobox placeholder="Search..." searchMode>
           <span slot="label">I'm searching for</span>
           <option value="1">Bulbasaur</option>
           <option value="2">Charmander</option>

diff --git 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}
     >
       <span slot="label">${args.label}</span>
-      <option value="1">Bulbasaur</option>
-      <option value="2">Charmander</option>
-      <option value="3">Squirtle</option>
-      <option value="4">Caterpie</option>
-      <option value="5">Weedle</option>
-      <option value="6">Pidgey</option>
-      <option value="7">Rattata</option>
-      <option value="8">Spearow</option>
-      <option value="9">Ekans</option>
-      <option value="10">Pikachu</option>
-      <option value="11">Sandshrew</option>
-      <option value="12">Clefairy</option>
-      <option value="13">Magikarp</option>
-      <option value="14">Snorlax</option>
+      <option value="1">New Hampshire</option>
+      <option value="2">Massachusetts</option>
+      <option value="3">Connecticut</option>
+      <option value="4">Rhode Island</option>
+      <option value="5">New York</option>
+      <option value="6">New Jersey</option>
+      <option value="7">Pennsylvania</option>
+      <option value="8">Delaware</option>
+      <option value="9">Maryland</option>
+      <option value="10">Virginia</option>
+      <option value="11">North Carolina</option>
+      <option value="12">South Carolina</option>
+      <option value="13">Georgia</option>
     </pharos-combobox>
   `;
 
@@ -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"
         >
           <pharos-combobox
-            placeholder="Who's that Pokemon?"
+            placeholder="Select a state"
             @change="${(e) => action('Change')(e.target.value)}"
             @input="${(e) => action('Input')(e.target['_input'].value)}"
           >
-            <span slot="label">I fire events on input</span>
-            <option value="bu">Bulbasaur</option>
-            <option value="ch">Charmander</option>
-            <option value="sq">Squirtle</option>
-            <option value="ca">Caterpie</option>
-            <option value="we">Weedle</option>
-            <option value="pi">Pidgey</option>
-            <option value="ra">Rattata</option>
-            <option value="sp">Spearow</option>
-            <option value="ek">Ekans</option>
-            <option value="pi">Pikachu</option>
-            <option value="sa">Sandshrew</option>
-            <option value="cl">Clefairy</option>
-            <option value="ma">Magikarp</option>
-            <option value="sn">Snorlax</option>
-            <option value="me">Mew</option>
-            <option value="mw">Mewtwo</option>
+            <span slot="label">Events fire on selection</span>
+            <option value="NH">New Hampshire</option>
+            <option value="MA">Massachusetts</option>
+            <option value="CT">Connecticut</option>
+            <option value="RI">Rhode Island</option>
+            <option value="NY">New York</option>
+            <option value="NJ">New Jersey</option>
+            <option value="PA">Pennsylvania</option>
+            <option value="DE">Delaware</option>
+            <option value="MD">Maryland</option>
+            <option value="VA">Virginia</option>
+            <option value="NC">North Carolina</option>
+            <option value="SC">South Carolina</option>
+            <option value="GA">Georgia</option>
           </pharos-combobox>
         </div>
       `;
@@ -156,7 +152,7 @@ export const Template = (args) =>
   <Story name="Search Mode">
     {() => {
       return html`
-        <pharos-combobox placeholder="Search for things" search-mode>
+        <pharos-combobox placeholder="Search..." search-mode>
           <span slot="label">I'm searching for</span>
           <option value="1">Option 1</option>
           <option value="2">Option 2</option>

diff --git a/...pharos/src/components/dropdown-menu-nav/PharosDropdownMenuNav.react.stories.mdx b/...pharos/src/components/dropdown-menu-nav/PharosDropdownMenuNav.react.stories.mdx
@@ -19,35 +19,35 @@ import { PharosLink } from '../../react-components/link/pharos-link';
     <PharosDropdownMenuNav>
       <PharosDropdownMenuNavLink
         href="#"
-        id="smurfs-link"
-        data-dropdown-menu-id="smurfs-menu"
+        id="category1-link"
+        data-dropdown-menu-id="category1-menu"
         data-dropdown-menu-hover
         target="_blank"
       >
-        Smurfs
+        Category 1
       </PharosDropdownMenuNavLink>
-      <PharosDropdownMenu id="smurfs-menu" data-dropdown-menu-hover>
-        <PharosDropdownMenuItem>Papa</PharosDropdownMenuItem>
-        <PharosDropdownMenuItem>Clumsy</PharosDropdownMenuItem>
-        <PharosDropdownMenuItem>Smurfette</PharosDropdownMenuItem>
+      <PharosDropdownMenu id="category1-menu" data-dropdown-menu-hover>
+        <PharosDropdownMenuItem>Item 1.1</PharosDropdownMenuItem>
+        <PharosDropdownMenuItem>Item 1.2</PharosDropdownMenuItem>
+        <PharosDropdownMenuItem>Item 1.3</PharosDropdownMenuItem>
       </PharosDropdownMenu>
       <PharosDropdownMenuNavLink
         href="#"
-        id="tmnt-link"
-        data-dropdown-menu-id="tmnt-menu"
+        id="category2-link"
+        data-dropdown-menu-id="category2-menu"
         data-dropdown-menu-hover
         target="_blank"
       >
-        Ninja Turtles
+        Category 2
       </PharosDropdownMenuNavLink>
-      <PharosDropdownMenu id="tmnt-menu">
-        <PharosDropdownMenuItem>Leonardo</PharosDropdownMenuItem>
-        <PharosDropdownMenuItem>Donatello</PharosDropdownMenuItem>
-        <PharosDropdownMenuItem>Raphael</PharosDropdownMenuItem>
-        <PharosDropdownMenuItem>Michelangelo</PharosDropdownMenuItem>
+      <PharosDropdownMenu id="category2-menu">
+        <PharosDropdownMenuItem>Item 2.1</PharosDropdownMenuItem>
+        <PharosDropdownMenuItem>Item 2.2</PharosDropdownMenuItem>
+        <PharosDropdownMenuItem>Item 2.3</PharosDropdownMenuItem>
+        <PharosDropdownMenuItem>Item 2.4</PharosDropdownMenuItem>
       </PharosDropdownMenu>
       <PharosDropdownMenuNavLink href="#" id="other-link" target="_blank">
-        Link to Other
+        Link
       </PharosDropdownMenuNavLink>
     </PharosDropdownMenuNav>
   </Story>

diff --git a/...pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav.wc.stories.mdx b/...pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav.wc.stories.mdx
@@ -20,33 +20,33 @@ import '../link/pharos-link';
         <pharos-dropdown-menu-nav>
           <pharos-dropdown-menu-nav-link
             href="#"
-            id="smurfs-link"
-            data-dropdown-menu-id="smurfs-menu"
+            id="category1-link"
+            data-dropdown-menu-id="category1-menu"
             data-dropdown-menu-hover
             target="_blank"
-            >Smurfs</pharos-dropdown-menu-nav-link
+            >Category 1</pharos-dropdown-menu-nav-link
           >
-          <pharos-dropdown-menu id="smurfs-menu" data-dropdown-menu-hover>
-            <pharos-dropdown-menu-item>Papa</pharos-dropdown-menu-item>
-            <pharos-dropdown-menu-item>Clumsy</pharos-dropdown-menu-item>
-            <pharos-dropdown-menu-item>Smurfette</pharos-dropdown-menu-item>
+          <pharos-dropdown-menu id="category1-menu" data-dropdown-menu-hover>
+            <pharos-dropdown-menu-item>Item 1.1</pharos-dropdown-menu-item>
+            <pharos-dropdown-menu-item>Item 1.2</pharos-dropdown-menu-item>
+            <pharos-dropdown-menu-item>Item 1.3</pharos-dropdown-menu-item>
           </pharos-dropdown-menu>
           <pharos-dropdown-menu-nav-link
             href="#"
-            id="tmnt-link"
-            data-dropdown-menu-id="tmnt-menu"
+            id="category2-link"
+            data-dropdown-menu-id="category2-menu"
             data-dropdown-menu-hover
             target="_blank"
-            >Ninja Turtles</pharos-dropdown-menu-nav-link
+            >Category 2</pharos-dropdown-menu-nav-link
           >
-          <pharos-dropdown-menu id="tmnt-menu">
-            <pharos-dropdown-menu-item>Leonardo</pharos-dropdown-menu-item>
-            <pharos-dropdown-menu-item>Donatello</pharos-dropdown-menu-item>
-            <pharos-dropdown-menu-item>Raphael</pharos-dropdown-menu-item>
-            <pharos-dropdown-menu-item>Michelangelo</pharos-dropdown-menu-item>
+          <pharos-dropdown-menu id="category2-menu">
+            <pharos-dropdown-menu-item>Item 2.1</pharos-dropdown-menu-item>
+            <pharos-dropdown-menu-item>Item 2.2</pharos-dropdown-menu-item>
+            <pharos-dropdown-menu-item>Item 2.3</pharos-dropdown-menu-item>
+            <pharos-dropdown-menu-item>Item 2.4</pharos-dropdown-menu-item>
           </pharos-dropdown-menu>
           <pharos-dropdown-menu-nav-link href="#" id="other-link" target="_blank"
-            >Link to Other</pharos-dropdown-menu-nav-link
+            >Link</pharos-dropdown-menu-nav-link
           >
         </pharos-dropdown-menu-nav>
       `;

diff --git 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';
       </PharosButton>
       <PharosDropdownMenu id="my-menu-descriptions" showSelected>
         <PharosDropdownMenuItem selected>
-          House Stark
-          <span slot="description">Winterfell, Capital of the Kingdom of the North</span>
+          Item 1<span slot="description">Description for item 1</span>
         </PharosDropdownMenuItem>
         <PharosDropdownMenuItem>
-          House Lannister
-          <span slot="description">Casterly Rock, Capital of the Westerlands</span>
+          Item 2<span slot="description">Description for item 2</span>
         </PharosDropdownMenuItem>
         <PharosDropdownMenuItem>
-          House Targaryen
-          <span slot="description">King's Landing, Capital of the Seven Kingdoms</span>
+          Item 3<span slot="description">Description for item 3</span>
         </PharosDropdownMenuItem>
         <PharosDropdownMenuItem>
-          House Tyrell
-          <span slot="description">Highgarden, Capital of the Reach</span>
+          Item 4<span slot="description">Description for item 4</span>
         </PharosDropdownMenuItem>
         <PharosDropdownMenuItem disabled>
-          House Martell
-          <span slot="description">Sunspear, Capital of Dorne</span>
+          Disabled
+          <span slot="description">This item has been disabled</span>
         </PharosDropdownMenuItem>
       </PharosDropdownMenu>
     </div>
@@ -175,15 +171,13 @@ import { PharosButton } from '../../react-components/button/pharos-button';
         With attribute fullWidth to match the width of the trigger
       </PharosButton>
       <PharosDropdownMenu id="my-menu-full" fullWidth>
-        <PharosDropdownMenuItem>Oh, supercalifragilisticexpialidocious!</PharosDropdownMenuItem>
         <PharosDropdownMenuItem>
-          <span style={{ whiteSpace: 'normal' }}>
-            Even though the sound of it is something quite atrocious
-          </span>
+          <span style={{ whiteSpace: 'normal' }}>Use full-width to display lengthy text</span>
         </PharosDropdownMenuItem>
         <PharosDropdownMenuItem>
           <span style={{ whiteSpace: 'normal' }}>
-            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
           </span>
         </PharosDropdownMenuItem>
       </PharosDropdownMenu>
@@ -244,14 +238,11 @@ import { PharosButton } from '../../react-components/button/pharos-button';
         Click Me
       </PharosButton>
       <PharosDropdownMenu id="my-menu-multiple">
-        <PharosDropdownMenuItem>Never gonna give you up</PharosDropdownMenuItem>
-        <PharosDropdownMenuItem>Never gonna let you down</PharosDropdownMenuItem>
-        <PharosDropdownMenuItem>
-          <span style={{ whiteSpace: 'normal' }}>Never gonna run around and desert you</span>
-        </PharosDropdownMenuItem>
-        <PharosDropdownMenuItem>Never gonna make you cry</PharosDropdownMenuItem>
-        <PharosDropdownMenuItem>Never gonna say goodbye</PharosDropdownMenuItem>
-        <PharosDropdownMenuItem>Never gonna tell a lie and hurt you</PharosDropdownMenuItem>
+        <PharosDropdownMenuItem>Item 1</PharosDropdownMenuItem>
+        <PharosDropdownMenuItem>Item 2</PharosDropdownMenuItem>
+        <PharosDropdownMenuItem>Item 3</PharosDropdownMenuItem>
+        <PharosDropdownMenuItem>Item 4</PharosDropdownMenuItem>
+        <PharosDropdownMenuItem>Item 5</PharosDropdownMenuItem>
       </PharosDropdownMenu>
       <PharosButton
         data-dropdown-menu-id="my-menu-multiple"