Notice Choice web component fine tuning (#11515)

### 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**

**Changed**

-  Notice Choice web component fine tuned.

**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/web-components/src/components/notice-choice/__stories__/README.stories.mdx

@@ -21,8 +21,6 @@ Here's a quick example to get you started.
 
 ### JS (via import)
 
-Note that, please always use the latest version.
-
 ```javascript
 import '@carbon/ibmdotcom-web-components/es/components/notice-choice/index.js';
 ```
@@ -40,9 +38,8 @@ import '@carbon/ibmdotcom-web-components/es/components/notice-choice/index.js';
   question-choices="1,2"
   state="CA"
   terms-condition-link=""
-  bpid-legal-text=""
-  enable-all-opt-in=""
-  default-values="">
+  hide-error-message="false"
+  enable-all-opt-in="">
 </c4d-notice-choice>
 ```
 
@@ -60,7 +57,14 @@ document.addEventListener('cds-notice-choice-change', (event) => {
 
 ## Props
 
-<Props of="c4d-notice-choice" />
+| Name                 | Description                                                                                 | Default |
+| -------------------- | ------------------------------------------------------------------------------------------- | ------- |
+| question-choices     | Set to "1" if Email only. Set to "1, 2" if Email and Phone                                  | 1       |
+| country              | Country code based on the customer country                                                  | US      |
+| state                | State code based on the customer state                                                      |         |
+| 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   |
 
 ## Stable selectors
 

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

@@ -49,37 +49,70 @@ const countryList = {
   India: 'IN',
   China: 'CN',
   Japan: 'JP',
+  'Korea, Republic of': 'KR',
 };
 const stateList = {
-  Unknown: '',
-  Alabama: 'AL',
-  California: 'CA',
+  US: {
+    Unknown: '',
+    Alabama: 'AL',
+    California: 'CA',
+  },
+  IN: {
+    Unknown: '',
+    Karnataka: 'KA',
+    Delhi: 'DL',
+  },
+  CN: {
+    Unknown: '',
+    'Beijing Shi': 'BJ',
+    'Hong Kong': 'HK',
+  },
+  JP: {
+    Unknown: '',
+    Kyoto: '26',
+    Mie: '27',
+  },
+  KR: {
+    Unknown: '',
+    Sejong: '50',
+    'Daegu-gwangyeoksi': '27',
+  },
+  DE: {
+    Unknown: '',
+    Hamburg: 'HU',
+    Sachsen: 'SN',
+  },
 };
 const hideErrorMessages = {
   true: 'true',
   false: 'false',
 };
-const showLegalNotices = {
-  true: 'true',
-  false: 'false',
-};
 const onChange = (event: CustomEvent) => {
   console.log(event.detail);
 };
-const props = () => ({
-  language: select('Language', languages, 'en'),
-  country: select('Country', countryList, 'US'),
-  state: select('State', stateList, ''),
-  questionchoices: select('Question Choices', questionChoices, '1,2'),
-  termsConditionLink: text(
-    'Terms & Condition Link',
-    'https://www.ibm.com/legal'
-  ),
-  bpidLegalText: text('BPID Legal Text', ''),
-  onChange: action('c4d-notice-choice-change'),
-  hideErrorMessages: select('Hide Error Messages', hideErrorMessages, 'false'),
-  showLegalNotice: select('Show Legal Notice', showLegalNotices, 'true'),
-});
+const props = () => {
+  const selectedCountry = select('Country', countryList, 'US');
+  let availableStates = stateList[selectedCountry] || [{ Unknown: '' }];
+
+  return {
+    language: select('Language', languages, 'en'),
+    country: selectedCountry,
+    state: select('State', availableStates, ''),
+    questionchoices: select('Question Choices', questionChoices, '1,2'),
+    termsConditionLink: text(
+      'Terms & Condition Link',
+      'https://www.ibm.com/legal'
+    ),
+    onChange: action('c4d-notice-choice-change'),
+    hideErrorMessages: select(
+      'Hide Error Messages',
+      hideErrorMessages,
+      'false'
+    ),
+  };
+};
+
+console.log(props);
 
 export const Default = (args) => {
   const {
@@ -89,9 +122,7 @@ export const Default = (args) => {
     termsConditionLink,
     questionchoices,
     hideErrorMessages,
-    showLegalNotice,
     enableAllOptIn,
-    bpidLegalText,
     hiddenEmail,
     hiddenPhone,
     ncTeleDetail,
@@ -105,9 +136,7 @@ export const Default = (args) => {
       state="${state}"
       terms-condition-link="${termsConditionLink || ''}"
       hide-error-message="${hideErrorMessages}"
-      show-legal-notice=${showLegalNotice}
       ?enable-all-opt-in=${enableAllOptIn}
-      bpid-legal-text="${bpidLegalText}"
       .hiddenEmail="${hiddenEmail}"
       .hiddenPhone="${hiddenPhone}"
       .nc-tele-detail="${ncTeleDetail}"