Skip to content

Website: Convert Form > Radio demos to the new format #3708

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shleewhite wants to merge 1 commit into
base: main
Choose a base branch
from
+416 −146
Open

Website: Convert Form > Radio demos to the new format #3708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<Hds::Form::Radio::Base
name="data-center-radio2"
aria-label="San Francisco datacenter number 1"
@value="SF1"
{{on "change" this.yourOnChangeFunction}}
/>
7 changes: 1 addition & 6 deletions website/docs/components/form/radio/index.js → .../code/code-snippets/radio-base.classic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"');
Expand Down
19 changes: 19 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-base.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"');
};

<template>
<HdsFormRadioBase
name="data-center-radio2"
aria-label="San Francisco datacenter number 1"
@value="SF1"
{{on "change" this.yourOnChangeFunction}}
/>
</template>
}
19 changes: 19 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<Hds::Form::Radio::Group @layout="vertical" @name="datacenter-demo5" as |G|>
<G.Legend>Choose datacenter</G.Legend>
<G.RadioField @id="datacenter-NYC1" checked @value="NYC1" {{on "change" this.yourOnChangeFunction}} as |F|>
<F.Label>NYC1</F.Label>
<F.HelperText>CoreSite- 32 Avenue of the Americas</F.HelperText>
</G.RadioField>
<G.RadioField @id="datacenter-DC1" @value="DC1" {{on "change" this.yourOnChangeFunction}} as |F|>
<F.Label>DC1</F.Label>
<F.HelperText>CoreSite- K Street</F.HelperText>
</G.RadioField>
<G.RadioField @id="datacenter-NYC2" @value="NYC2" {{on "change" this.yourOnChangeFunction}} as |F|>
<F.Label>NYC1</F.Label>
<F.HelperText>H5 Data Center - 325 Hudson Street</F.HelperText>
</G.RadioField>
<G.RadioField @id="datacenter-SF1" @value="SF1" {{on "change" this.yourOnChangeFunction}} as |F|>
<F.Label>SF1</F.Label>
<F.HelperText>INAP - 650 Townsend Street</F.HelperText>
</G.RadioField>
</Hds::Form::Radio::Group>
9 changes: 9 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"');
}
}
53 changes: 53 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"');
};

<template>
<HdsFormRadioGroup @layout="vertical" @name="datacenter-demo5" as |G|>
<G.Legend>Choose datacenter</G.Legend>
<G.RadioField
@id="datacenter-NYC1"
checked
@value="NYC1"
{{on "change" this.yourOnChangeFunction}}
as |F|
>
<F.Label>NYC1</F.Label>
<F.HelperText>CoreSite- 32 Avenue of the Americas</F.HelperText>
</G.RadioField>
<G.RadioField
@id="datacenter-DC1"
@value="DC1"
{{on "change" this.yourOnChangeFunction}}
as |F|
>
<F.Label>DC1</F.Label>
<F.HelperText>CoreSite- K Street</F.HelperText>
</G.RadioField>
<G.RadioField
@id="datacenter-NYC2"
@value="NYC2"
{{on "change" this.yourOnChangeFunction}}
as |F|
>
<F.Label>NYC1</F.Label>
<F.HelperText>H5 Data Center - 325 Hudson Street</F.HelperText>
</G.RadioField>
<G.RadioField
@id="datacenter-SF1"
@value="SF1"
{{on "change" this.yourOnChangeFunction}}
as |F|
>
<F.Label>SF1</F.Label>
<F.HelperText>INAP - 650 Townsend Street</F.HelperText>
</G.RadioField>
</HdsFormRadioGroup>
</template>
}
3 changes: 3 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<Hds::Form::Radio::Field name="data-center-radio" @value="SF1" {{on "change" this.yourOnChangeFunction}} as |F|>
<F.Label>SF1</F.Label>
</Hds::Form::Radio::Field>
9 changes: 9 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"');
}
}
21 changes: 21 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-field.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"');
};

<template>
<HdsFormRadioField
name="data-center-radio"
@value="SF1"
{{on "change" this.yourOnChangeFunction}}
as |F|
>
<F.Label>SF1</F.Label>
</HdsFormRadioField>
</template>
}
15 changes: 15 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.classic.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<Hds::Form::Radio::Group @name="datacenter-demo1" as |G|>
<G.Legend>Choose datacenter</G.Legend>
<G.RadioField as |F|>
<F.Label>NYC1</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>DC1</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>NYC2</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>SF1</F.Label>
</G.RadioField>
</Hds::Form::Radio::Group>
23 changes: 23 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import type { TemplateOnlyComponent } from '@ember/component/template-only';

import { HdsFormRadioGroup } from '@hashicorp/design-system-components/components';

const LocalComponent: TemplateOnlyComponent = <template>
<HdsFormRadioGroup @name="datacenter-demo1" as |G|>
<G.Legend>Choose datacenter</G.Legend>
<G.RadioField as |F|>
<F.Label>NYC1</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>DC1</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>NYC2</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>SF1</F.Label>
</G.RadioField>
</HdsFormRadioGroup>
</template>;

export default LocalComponent;
15 changes: 15 additions & 0 deletions ...s/components/form/radio/partials/code/code-snippets/radio-group-extra-content.classic.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<Hds::Form::Radio::Group @layout="horizontal" @name="method-demo1" as |G|>
<G.Legend>Method <Hds::Badge @size="small" @text="Beta" @color="highlight" /></G.Legend>
<G.HelperText>Choose which HTTP method to use for the communication channel. See
<Hds::Link::Inline @href="#">HTTP protocol</Hds::Link::Inline>
for more details.</G.HelperText>
<G.RadioField as |F|>
<F.Label>POST</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>GET</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>PUT</F.Label>
</G.RadioField>
</Hds::Form::Radio::Group>
29 changes: 29 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = <template>
<HdsFormRadioGroup @layout="horizontal" @name="method-demo1" as |G|>
<G.Legend>Method
<HdsBadge @size="small" @text="Beta" @color="highlight" /></G.Legend>
<G.HelperText>Choose which HTTP method to use for the communication channel.
See
<HdsLinkInline @href="#">HTTP protocol</HdsLinkInline>
for more details.</G.HelperText>
<G.RadioField as |F|>
<F.Label>POST</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>GET</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>PUT</F.Label>
</G.RadioField>
</HdsFormRadioGroup>
</template>;

export default LocalComponent;
19 changes: 19 additions & 0 deletions ...docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.classic.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<Hds::Form as |FORM|>
<FORM.Section>
<Hds::Form::Radio::Group @isRequired={{true}} @layout="horizontal" @name="method-demo2" as |G|>
<G.Legend>Method</G.Legend>
<G.HelperText>Choose which HTTP method to use for the communication channel.</G.HelperText>
<G.RadioField as |F|><F.Label>POST</F.Label></G.RadioField>
<G.RadioField as |F|><F.Label>GET</F.Label></G.RadioField>
<G.RadioField as |F|><F.Label>PUT</F.Label></G.RadioField>
</Hds::Form::Radio::Group>

<Hds::Form::Radio::Group @isOptional={{true}} @layout="horizontal" @name="method-demo3" as |G|>
<G.Legend>Method</G.Legend>
<G.HelperText>Choose which HTTP method to use for the communication channel.</G.HelperText>
<G.RadioField as |F|><F.Label>POST</F.Label></G.RadioField>
<G.RadioField as |F|><F.Label>GET</F.Label></G.RadioField>
<G.RadioField as |F|><F.Label>PUT</F.Label></G.RadioField>
</Hds::Form::Radio::Group>
</FORM.Section>
</Hds::Form>
42 changes: 42 additions & 0 deletions website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import type { TemplateOnlyComponent } from '@ember/component/template-only';

import {
HdsFormRadioGroup,
HdsForm,
} from '@hashicorp/design-system-components/components';

const LocalComponent: TemplateOnlyComponent = <template>
<HdsForm as |FORM|>
<FORM.Section>
<HdsFormRadioGroup
@isRequired={{true}}
@layout="horizontal"
@name="method-demo2"
as |G|
>
<G.Legend>Method</G.Legend>
<G.HelperText>Choose which HTTP method to use for the communication
channel.</G.HelperText>
<G.RadioField as |F|><F.Label>POST</F.Label></G.RadioField>
<G.RadioField as |F|><F.Label>GET</F.Label></G.RadioField>
<G.RadioField as |F|><F.Label>PUT</F.Label></G.RadioField>
</HdsFormRadioGroup>

<HdsFormRadioGroup
@isOptional={{true}}
@layout="horizontal"
@name="method-demo3"
as |G|
>
<G.Legend>Method</G.Legend>
<G.HelperText>Choose which HTTP method to use for the communication
channel.</G.HelperText>
<G.RadioField as |F|><F.Label>POST</F.Label></G.RadioField>
<G.RadioField as |F|><F.Label>GET</F.Label></G.RadioField>
<G.RadioField as |F|><F.Label>PUT</F.Label></G.RadioField>
</HdsFormRadioGroup>
</FORM.Section>
</HdsForm>
</template>;

export default LocalComponent;
37 changes: 37 additions & 0 deletions ...ite/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.classic.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<Hds::Form as |FORM|>
<FORM.Section>
<Hds::Form::Radio::Group @name="datacenter-demo2" as |G|>
<G.Legend>Choose datacenter</G.Legend>
<G.RadioField as |F|>
<F.Label>NYC1</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>DC1</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>NYC2</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>SF1</F.Label>
</G.RadioField>
</Hds::Form::Radio::Group>
</FORM.Section>

<FORM.Section>
<Hds::Form::Radio::Group @layout="horizontal" @name="datacenter-demo3" as |G|>
<G.Legend>Choose datacenter</G.Legend>
<G.RadioField as |F|>
<F.Label>NYC1</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>DC1</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>NYC2</F.Label>
</G.RadioField>
<G.RadioField as |F|>
<F.Label>SF1</F.Label>
</G.RadioField>
</Hds::Form::Radio::Group>
</FORM.Section>
</Hds::Form>
Loading
Loading