Combine Email and Phone into single choice on forms (carbon-design-sy…

…stem#12127)

### Related Ticket(s)

[Noitce & Choice w3 Publisher](https://w3.ibm.com/w3publisher/urx/notice-and-choice-v23)

### Description

Notice & Choice is a legally required component to create a form where IBM collects its customer information.
This section shows the specific product's legal links, terms, and conditions. Along with this, it collects users' consent regarding communication preferences.

### Changelog

**New**
- Combine Email and Phone into a single choice on forms

**Changed**

- Instead of pre-text followed by Email and Phone boxes, combine them into a single checkbox question.
Text planned for this is: "I'd like IBM to use my contact details to keep me informed about products, services and offers. More information on how IBM uses data and ways to opt-out can be found in the IBM Privacy Statement.". "Opt-out" and "IBM Privacy Statement would be linked as usual.

**Removed**

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/styles/scss/components/notice-choice/_notice-choice.scss

@@ -9,6 +9,9 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/convert';
+@use '@carbon/type';
+
+@include type.reset();
 
 @mixin notice-choice {
   .#{$prefix}--nc {
@@ -17,6 +20,7 @@
     p,
     .#{$prefix}--checkbox-group {
       margin-block-end: $spacing-06;
+      @include type.type-style('legal-02');
     }
 
     a {

packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx

@@ -39,7 +39,8 @@ import '@carbon/ibmdotcom-web-components/es/components/notice-choice/index.js';
   state="CA"
   terms-condition-link=""
   hide-error-message="false"
-  enable-all-opt-in="">
+  combine-email-phone="false"
+  >
 </c4d-notice-choice>
 ```
 
@@ -65,6 +66,8 @@ document.addEventListener('cds-notice-choice-change', (event) => {
 | language             | form based on the country and language                                                      | en      |
 | terms-condition-link | Terms and conditions link appended to the end of the privacy statement - should be specific |         |
 | hide-error-message   | Hide Error Messages for PUNS statement                                                      | false   |
+| combine-email-phone  | Combine Email and Phone                                                                     | false   |
+| environment          | Set environment variable Prod or Stage                                                      | Prod    |
 
 <Props of="c4d-notice-choice" />
 

packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts

@@ -44,7 +44,7 @@ const languages = {
   'Ukrainian [uk]': 'uk',
 };
 const countryList = {
-  'Unites States': 'US',
+  'United States': 'US',
   Germany: 'DE',
   India: 'IN',
   China: 'CN',
@@ -87,6 +87,16 @@ const hideErrorMessages = {
   true: 'true',
   false: 'false',
 };
+
+const combineEmailPhone = {
+  true: 'true',
+  false: 'false',
+};
+
+const environment = {
+  Production: 'prod',
+  Stage: 'stage',
+};
 const onChange = (event: CustomEvent) => {
   console.log(event.detail);
 };
@@ -109,11 +119,15 @@ const props = () => {
       hideErrorMessages,
       'false'
     ),
+    combineEmailPhone: select(
+      'Combine Email Phone',
+      combineEmailPhone,
+      'false'
+    ),
+    environment: select('Environment', environment, 'prod'),
   };
 };
 
-console.log(props);
-
 export const Default = (args) => {
   const {
     language,
@@ -127,6 +141,8 @@ export const Default = (args) => {
     hiddenPhone,
     ncTeleDetail,
     ncEmailDetail,
+    combineEmailPhone,
+    environment,
   } = args?.NoticeChoice ?? {};
   return html`
     <c4d-notice-choice
@@ -141,6 +157,8 @@ export const Default = (args) => {
       .hiddenPhone="${hiddenPhone}"
       .nc-tele-detail="${ncTeleDetail}"
       .nc-email-detail="${ncEmailDetail}"
+      combine-email-phone="${combineEmailPhone}"
+      environment="${environment}"
       @c4d-notice-choice-change=${onChange}></c4d-notice-choice>
   `;
 };