diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.hbs new file mode 100644 index 00000000000..831d0876411 --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.hbs @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/website/docs/components/form/radio/index.js b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.js similarity index 58% rename from website/docs/components/form/radio/index.js rename to website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.js index f41dedd5b4f..80ee157774a 100644 --- a/website/docs/components/form/radio/index.js +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.js @@ -1,12 +1,7 @@ -/** - * Copyright IBM Corp. 2021, 2025 - * SPDX-License-Identifier: MPL-2.0 - */ - import Component from '@glimmer/component'; import { action } from '@ember/object'; -export default class Index extends Component { +export default class LocalComponent extends Component { @action yourOnChangeFunction() { console.log('Invoked "yourOnChangeFunction"'); diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-base.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.gts new file mode 100644 index 00000000000..431a8be531a --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.gts @@ -0,0 +1,19 @@ +import Component from '@glimmer/component'; +import { on } from '@ember/modifier'; + +import { HdsFormRadioBase } from '@hashicorp/design-system-components/components'; + +export default class LocalComponent extends Component { + yourOnChangeFunction = () => { + console.log('Invoked "yourOnChangeFunction"'); + }; + + +} diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.hbs new file mode 100644 index 00000000000..fddd4c57a3f --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.hbs @@ -0,0 +1,19 @@ + + Choose datacenter + + NYC1 + CoreSite- 32 Avenue of the Americas + + + DC1 + CoreSite- K Street + + + NYC1 + H5 Data Center - 325 Hudson Street + + + SF1 + INAP - 650 Townsend Street + + \ No newline at end of file diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.js b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.js new file mode 100644 index 00000000000..80ee157774a --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.js @@ -0,0 +1,9 @@ +import Component from '@glimmer/component'; +import { action } from '@ember/object'; + +export default class LocalComponent extends Component { + @action + yourOnChangeFunction() { + console.log('Invoked "yourOnChangeFunction"'); + } +} diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.gts new file mode 100644 index 00000000000..c0dd26697d0 --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.gts @@ -0,0 +1,53 @@ +import Component from '@glimmer/component'; +import { on } from '@ember/modifier'; + +import { HdsFormRadioGroup } from '@hashicorp/design-system-components/components'; + +export default class LocalComponent extends Component { + yourOnChangeFunction = () => { + console.log('Invoked "yourOnChangeFunction"'); + }; + + +} diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.hbs new file mode 100644 index 00000000000..c908f59445d --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.hbs @@ -0,0 +1,3 @@ + + SF1 + \ No newline at end of file diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.js b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.js new file mode 100644 index 00000000000..80ee157774a --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.js @@ -0,0 +1,9 @@ +import Component from '@glimmer/component'; +import { action } from '@ember/object'; + +export default class LocalComponent extends Component { + @action + yourOnChangeFunction() { + console.log('Invoked "yourOnChangeFunction"'); + } +} diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.gts new file mode 100644 index 00000000000..a6d04e47ed5 --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.gts @@ -0,0 +1,21 @@ +import Component from '@glimmer/component'; +import { on } from '@ember/modifier'; + +import { HdsFormRadioField } from '@hashicorp/design-system-components/components'; + +export default class LocalComponent extends Component { + yourOnChangeFunction = () => { + console.log('Invoked "yourOnChangeFunction"'); + }; + + +} diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.classic.hbs new file mode 100644 index 00000000000..d574407c8fe --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.classic.hbs @@ -0,0 +1,15 @@ + + Choose datacenter + + NYC1 + + + DC1 + + + NYC2 + + + SF1 + + \ No newline at end of file diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.gts new file mode 100644 index 00000000000..a7b0908e52f --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.gts @@ -0,0 +1,23 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import { HdsFormRadioGroup } from '@hashicorp/design-system-components/components'; + +const LocalComponent: TemplateOnlyComponent = ; + +export default LocalComponent; diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.classic.hbs new file mode 100644 index 00000000000..c34877ab460 --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.classic.hbs @@ -0,0 +1,15 @@ + + Method + Choose which HTTP method to use for the communication channel. See + HTTP protocol + for more details. + + POST + + + GET + + + PUT + + \ No newline at end of file diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.gts new file mode 100644 index 00000000000..b42f2e31c5e --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.gts @@ -0,0 +1,29 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import { + HdsFormRadioGroup, + HdsBadge, + HdsLinkInline, +} from '@hashicorp/design-system-components/components'; + +const LocalComponent: TemplateOnlyComponent = ; + +export default LocalComponent; diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.classic.hbs new file mode 100644 index 00000000000..1b2a55b08e9 --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.classic.hbs @@ -0,0 +1,19 @@ + + + + Method + Choose which HTTP method to use for the communication channel. + POST + GET + PUT + + + + Method + Choose which HTTP method to use for the communication channel. + POST + GET + PUT + + + \ No newline at end of file diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.gts new file mode 100644 index 00000000000..7e8fff3f166 --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.gts @@ -0,0 +1,42 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import { + HdsFormRadioGroup, + HdsForm, +} from '@hashicorp/design-system-components/components'; + +const LocalComponent: TemplateOnlyComponent = ; + +export default LocalComponent; diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.classic.hbs new file mode 100644 index 00000000000..db439995352 --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.classic.hbs @@ -0,0 +1,37 @@ + + + + Choose datacenter + + NYC1 + + + DC1 + + + NYC2 + + + SF1 + + + + + + + Choose datacenter + + NYC1 + + + DC1 + + + NYC2 + + + SF1 + + + + \ No newline at end of file diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.gts new file mode 100644 index 00000000000..1acd3c6e9e9 --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.gts @@ -0,0 +1,48 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import { + HdsFormRadioGroup, + HdsForm, +} from '@hashicorp/design-system-components/components'; + +const LocalComponent: TemplateOnlyComponent = ; + +export default LocalComponent; diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.classic.hbs new file mode 100644 index 00000000000..57b9a4f2695 --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.classic.hbs @@ -0,0 +1,16 @@ + + Choose datacenter + + NYC1 + + + DC1 + + + NYC2 + + + SF1 + + Error: you need to choose one datacenter. + \ No newline at end of file diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.gts new file mode 100644 index 00000000000..ee72be2e265 --- /dev/null +++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.gts @@ -0,0 +1,24 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import { HdsFormRadioGroup } from '@hashicorp/design-system-components/components'; + +const LocalComponent: TemplateOnlyComponent = ; + +export default LocalComponent; diff --git a/website/docs/components/form/radio/partials/code/how-to-use.md b/website/docs/components/form/radio/partials/code/how-to-use.md index 9afb0f99950..de6f6531486 100644 --- a/website/docs/components/form/radio/partials/code/how-to-use.md +++ b/website/docs/components/form/radio/partials/code/how-to-use.md @@ -18,63 +18,13 @@ The basic invocation creates: The `@name` argument offers an easy way to provide the same name for all the Radio controls in a single place. -```handlebars - - Choose datacenter - - NYC1 - - - DC1 - - - NYC2 - - - SF1 - - -``` +[[code-snippets/radio-group-basic]] #### Layout To better fit your spacing requirements, choose between two different layout orientations: `vertical` or `horizontal`. -```handlebars - - Choose datacenter - - NYC1 - - - DC1 - - - NYC2 - - - SF1 - - -``` - -```handlebars - - Choose datacenter - - NYC1 - - - DC1 - - - NYC2 - - - SF1 - - -``` +[[code-snippets/radio-group-layout]] #### Extra content in legend and helper text @@ -89,96 +39,25 @@ The `Legend` and `HelperText` contextual components used in the Group yield thei When helper text is added, the component automatically adds an `aria-describedby` attribute to the `fieldset`, associating it with the automatically generated `ID`. -```handlebars - - Method - Choose which HTTP method to use for the communication channel. See HTTP protocol for more details. - - POST - - - GET - - - PUT - - -``` +[[code-snippets/radio-group-extra-content]] #### Required vs. optional Use the `@isRequired` and `@isOptional` arguments to add a visual indication that the field is “required” or “optional”. -```handlebars - - - - Method - Choose which HTTP method to use for the communication channel. - POST - GET - PUT - - - - Method - Choose which HTTP method to use for the communication channel. - POST - GET - PUT - - - -``` +[[code-snippets/radio-group-indicators]] #### Validation To indicate a field is invalid, provide an error message using the `Error` contextual component. -```handlebars - - Choose datacenter - - NYC1 - - - DC1 - - - NYC2 - - - SF1 - - Error: you need to choose one datacenter. - -``` +[[code-snippets/radio-group-validation]] #### Field items A group of Radios is made of one or more `Form::Radio::Field` components. All the arguments, attributes, and modifiers that can be passed to `Form::Radio::Field` can be passed to the same items in the Group declaration. -```handlebars - - Choose datacenter - - NYC1 - CoreSite- 32 Avenue of the Americas - - - DC1 - CoreSite- K Street - - - NYC1 - H5 Data Center - 325 Hudson Street - - - SF1 - INAP - 650 Townsend Street - - -``` +[[code-snippets/radio-field-items]] {{! ========================= }} {{! ===== BASE + FIELD ===== }} {{! ========================= }} @@ -198,19 +77,8 @@ The basic invocation for a Field component creates: - a `