chore(devenv): update variant labels (#784)

* chore(devenv): update variant labels

* chore(devenv): modal config update

src/components/card/card.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Card',
       notes: `
         Cards provide an at-a glance preview of the content they link to and frequently contain
         easily-consumable content.

src/components/code-snippet/code-snippet.config.js

@@ -41,7 +41,7 @@ module.exports = {
     },
     {
       name: 'inline-light',
-      label: 'Inline Light',
+      label: 'Inline (Light)',
       notes: `
         Code snippets are small blocks of reusable code that can be inserted in a code file.
 

src/components/combo-box/combo-box.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Combo Box',
     },
     {
       name: 'disabled',

src/components/detail-page-header/detail-page-header.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Detail Page Header',
     },
     {
       name: 'with-tabs',

src/components/dropdown/dropdown.config.js

@@ -4,14 +4,14 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Dropdown',
       notes: `
         The Dropdown component is used for navigating or filtering existing content.
       `,
     },
     {
       name: 'light',
-      label: 'Light',
+      label: 'Dropdown (Light)',
       context: {
         light: true,
       },
@@ -25,7 +25,7 @@ module.exports = {
     },
     {
       name: 'up-light',
-      label: 'Up light',
+      label: 'Up (Light)',
       context: {
         up: true,
         light: true,

src/components/form/form.config.js

@@ -4,12 +4,12 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Form',
       notes: 'Forms are widely used to collect user input.',
     },
     {
       name: 'light',
-      label: 'Light',
+      label: 'Form (Light)',
       context: {
         light: true,
       },

src/components/interior-left-nav/interior-left-nav.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Interior Left Nav',
       notes: `
         Interior left navigation organizes the content structure and provides
         context to support user orientation. This pattern accommodates the

src/components/list-box/list-box.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'List Box',
     },
     {
       name: 'inline',

src/components/loading/loading.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Loading',
       notes: `
         Loading spinners are used when retrieving data or performing slow computations,
         and help to notify users that loading is underway.

src/components/modal/modal.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Transactional Modal',
       notes: `
         Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.
       `,
@@ -19,8 +19,8 @@ module.exports = {
     },
     {
       name: 'nofooter',
-      label: 'Without footer',
-      notes: 'Passive modals are modals without footers.',
+      label: 'Passive Modal',
+      notes: 'Passive Modals are modals without footers.',
       context: {
         idSuffix: Math.random()
           .toString(36)
@@ -32,7 +32,7 @@ module.exports = {
     },
     {
       name: 'danger',
-      label: 'Danger',
+      label: 'Danger Modal',
       context: {
         idSuffix: Math.random()
           .toString(36)

src/components/multi-select/multi-select.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Multi Select',
     },
     {
       name: 'inline',

src/components/number-input/number-input.config.js

@@ -4,14 +4,15 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Number Input',
       notes: `
-        Number inputs are similar to text fields, but contain controls used to increase or decrease an incremental value. The Number Input component can be passed a starting value, a min, a max, and the step.
+        Number inputs are similar to text fields, but contain controls used to increase or decrease an incremental value.
+        The Number Input component can be passed a starting value, a min, a max, and the step.
       `,
     },
     {
       name: 'light',
-      label: 'Light',
+      label: 'Number Input (Light)',
       context: {
         light: true,
       },

src/components/order-summary/order-summary.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Order Summary',
       notes: `
         This component is used to display the items a user will be purchasing.
         This version does not include OrderSummaryCategory.

src/components/search/search.config.js

@@ -5,7 +5,7 @@ module.exports = {
   variants: [
     {
       name: 'large',
-      label: 'Normal',
+      label: 'Normal search',
       notes: `
         Search enables users to specify a word or a phrase to find particular relevant pieces of content
         without the use of navigation. Search can be used as the primary means of discovering content,
@@ -17,7 +17,7 @@ module.exports = {
     },
     {
       name: 'small',
-      label: 'Small',
+      label: 'Small search',
       notes: `
         Search enables users to specify a word or a phrase to find particular relevant pieces of content
         without the use of navigation. Search can be used as the primary means of discovering content,
@@ -30,7 +30,7 @@ module.exports = {
     },
     {
       name: 'large-light',
-      label: 'Normal Light',
+      label: 'Normal search (Light)',
       notes: `
         Search enables users to specify a word or a phrase to find particular relevant pieces of content
         without the use of navigation. Search can be used as the primary means of discovering content,
@@ -43,7 +43,7 @@ module.exports = {
     },
     {
       name: 'small-light',
-      label: 'Small Light',
+      label: 'Small search (Light)',
       notes: `
         Search enables users to specify a word or a phrase to find particular relevant pieces of content
         without the use of navigation. Search can be used as the primary means of discovering content,

src/components/select/select.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Select',
       notes: `
         Select displays a list below its title when selected. They are used primarily in forms,
         where a user chooses one option from a list. Once the user selects an item, the dropdown will
@@ -14,29 +14,29 @@ module.exports = {
     },
     {
       name: 'inline',
-      label: 'Inline',
+      label: 'Inline Select',
       notes: 'Inline select is for use when there will be multiple elements in a row.',
       context: {
         inline: true,
       },
     },
     {
       name: 'light',
-      label: 'Light',
+      label: 'Select (Light)',
       context: {
         light: true,
       },
     },
     {
       name: 'invalid',
-      label: 'Invalid',
+      label: 'Select (Invalid)',
       context: {
         invalid: true,
       },
     },
     {
       name: 'light-invalid',
-      label: 'Light invalid',
+      label: 'Select (Light/Invalid)',
       context: {
         light: true,
         invalid: true,

src/components/text-area/text-area.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Text Area',
       notes: `
         Text areas enable the user to interact with and input data. A text area is used when you
         anticipate the user to input more than 1 sentence.

src/components/text-input/text-input.config.js

@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Text Input',
       notes: `
         Text fields enable the user to interact with and input data. A single line
         field is used when the input anticipated by the user is a single line of
@@ -13,7 +13,7 @@ module.exports = {
     },
     {
       name: 'light',
-      label: 'Light',
+      label: 'Text Input (Light)',
       context: {
         light: true,
       },