Skip to content

Commit

Permalink
Merge branch 'alpha' into component-properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@twjeffery
twjeffery authored Sep 23, 2024
2 parents 8ee2416 + ed904b8 commit 49d9299
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 45 deletions.
74 changes: 32 additions & 42 deletions src/examples/text-field/TextFieldExamples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@ export default function TextFieldExamples() {
<h3 id="component-example-ask-user-for-an-address">Ask a user for an address </h3>
<Sandbox flags={["reactive"]}>
<GoAFormItem label="Street Address">
<GoAInput name="address" type="text" value="" onChange={noop} width="100%" />
<GoAInput name="address" type="text" value="" onChange={noop} width="100%" mb="xl" />
</GoAFormItem>
<GoAFormItem label="Suite or unit #">
<GoAInput name="suite" type="text" value="" onChange={noop} width="100%" />
<GoAInput name="suite" type="text" value="" onChange={noop} width="100%" mb="xl" />
</GoAFormItem>
<GoAFormItem label="City/town">
<GoAInput name="city" type="text" value="" onChange={noop} width="100%" />
<GoAInput name="city" type="text" value="" onChange={noop} width="100%" mb="xl" />
</GoAFormItem>

<GoABlock direction={"row"}>
<GoABlock direction="row" gap="l">
<GoAFormItem label="Provice/territory">
<GoADropdown onChange={noop} name="province" value="alberta">
<GoADropdownItem label="Alberta" value="alberta" />
Expand All @@ -47,49 +47,48 @@ export default function TextFieldExamples() {
</GoAFormItem>

<GoAFormItem label="Postal Code">
<GoAInput name="postalCode" type="text" value="" onChange={noop} width="100%" />
<GoAInput name="postalCode" type="text" value="" onChange={noop} width="14ch" />
</GoAFormItem>
</GoABlock>
</Sandbox>

<h3 id="component-example-ask-user-for-birthday">Ask a user for their birthday</h3>
<Sandbox flags={["reactive"]}>
<GoAFormItem
label="When is your birthday?"
label="What is your date of birth?"
labelSize="large"
helpText={"For example, 27 11 2007"}>
helpText={"For example, 27 November 2004"}>
<GoABlock gap="m" direction="row">
<GoAFormItem label="Day">
<GoAInput
onChange={noop}
value=""
name="bandNo"
type="number"
width="60px"
min={1}
max={31}
name="day"
width="6ch"
/>
</GoAFormItem>
<GoAFormItem label="Month">
<GoAInput
onChange={noop}
value=""
name="family"
type="number"
width="60px"
min={1}
max={12}
/>
<GoADropdown onChange={noop} name="month" value="">
<GoADropdownItem label="January" value="January" />
<GoADropdownItem label="February" value="February" />
<GoADropdownItem label="March" value="March" />
<GoADropdownItem label="April" value="April" />
<GoADropdownItem label="May" value="May" />
<GoADropdownItem label="June" value="June" />
<GoADropdownItem label="July" value="July" />
<GoADropdownItem label="August" value="August" />
<GoADropdownItem label="September" value="September" />
<GoADropdownItem label="October" value="October" />
<GoADropdownItem label="November" value="November" />
<GoADropdownItem label="December" value="December" />
</GoADropdown>
</GoAFormItem>
<GoAFormItem label="Year">
<GoAInput
onChange={noop}
value=""
name="position"
type="number"
width="88px"
min={1900}
max={2023}
name="year"
width="10ch"
/>
</GoAFormItem>
</GoABlock>
Expand All @@ -98,7 +97,7 @@ export default function TextFieldExamples() {

<h3 id="component-example-search">Search</h3>
<Sandbox flags={["reactive"]}>
<GoABlock gap="m" direction="row">
<GoABlock gap="xs" direction="row">
<GoAInput type="search" name="search" value="" onChange={noop} leadingIcon="search" />
<GoAButton type="primary" onClick={noop}>
Search
Expand Down Expand Up @@ -137,17 +136,17 @@ export default function TextFieldExamples() {
allowCopy={true}
code={`
<goa-form-item label="Tuition">
<goa-input (_change)="onChangeTuitionAmount($event)" value="" name="tuition" leadingcontent="$">
<goa-input (_change)="onChangeTuitionAmount($event)" value="" name="tuition" mb="xl">
<div slot="leadingContent">$</div>
</goa-input>
</goa-form-item>
<goa-form-item label="Books/Supplies/Instruments">
<goa-input (_change)="onChangeSuppliesAmount($event)" value="" name="book" leadingcontent="$">
<goa-input (_change)="onChangeSuppliesAmount($event)" value="" name="book" mb="xl">
<div slot="leadingContent">$</div>
</goa-input>
</goa-form-item>
<goa-form-item label="Other costs">
<goa-input (_change)="onChangeOthersAmount($event)" value="" name="others" leadingcontent="$">
<goa-input (_change)="onChangeOthersAmount($event)" value="" name="others">
<div slot="leadingContent">$</div>
</goa-input>
</goa-form-item>
Expand Down Expand Up @@ -232,10 +231,10 @@ export default function TextFieldExamples() {
/>

<GoAFormItem label="Tuition">
<GoAInput onChange={noop} value="" name="tuitionAmount" leadingContent="$" />
<GoAInput onChange={noop} value="" name="tuitionAmount" leadingContent="$" mb="xl" />
</GoAFormItem>
<GoAFormItem label="Books/Supplies/Instruments">
<GoAInput onChange={noop} value="" name="suppliesAmount" leadingContent="$" />
<GoAFormItem label="Supplies">
<GoAInput onChange={noop} value="" name="suppliesAmount" leadingContent="$" mb="xl" />
</GoAFormItem>
<GoAFormItem label="Other costs">
<GoAInput onChange={noop} value="" name="othersAmount" leadingContent="$" />
Expand All @@ -253,9 +252,6 @@ export default function TextFieldExamples() {
onChange={noop}
value=""
name="bandNo"
min={1}
max={999}
type="number"
width="88px"
/>
</GoAFormItem>
Expand All @@ -264,9 +260,6 @@ export default function TextFieldExamples() {
onChange={noop}
value=""
name="family"
min={1}
max={99999}
type="number"
width="105px"
/>
</GoAFormItem>
Expand All @@ -275,9 +268,6 @@ export default function TextFieldExamples() {
onChange={noop}
value=""
name="position"
min={1}
max={99}
type="number"
width="71px"
/>
</GoAFormItem>
Expand Down
24 changes: 21 additions & 3 deletions src/routes/components/Skeleton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,25 +79,43 @@ export default function SkeletonPage() {
defaultValue: "1",
},
{
name: "Line Count",
name: "linecount",
type: "number",
description:
"Used within components that contain multiple lines. Currently only used in card skeleton type",
defaultValue: "3",
lang: "angular",
},
{
name: "Max Width",
name: "maxwidth",
type: "string",
description: "Set component maximum width. Currently only used in card skeleton type",
defaultValue: "320px",
lang: "angular",
},
{

name: "mt,mr,mb,ml",
type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
description: "Apply margin to the top, right, bottom, and/or left of the component.",
},
{
name: "lineCount",
type: "number",
description:
"Used within components that contain multiple lines. Currently only used in card skeleton type",
defaultValue: "3",
lang: "react",
},
{
name: "maxWidth",
type: "string",
description: "Set component maximum width. Currently only used in card skeleton type",
defaultValue: "320px",
lang: "react",
},
];

{
function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>): void {
setSkeletonBindings(bindings);
setSkeletonProps(props as CastingType);
Expand Down

0 comments on commit 49d9299

Please sign in to comment.