Skip to content
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

Demo: Move Container into (Docs)Section in all components #1791

Merged
merged 3 commits into from
Dec 5, 2024
Merged

Demo: Move Container into (Docs)Section in all components #1791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8328de6
Docs(web): Move Container into Section in all components
crishpeen Dec 3, 2024
66b10d1
Docs(web-react): Move Container into DocsSection using `container` en…
crishpeen Dec 3, 2024
7129ec0
Docs(web-twig): Move Container into DocsSection using `container` enu…
crishpeen Dec 3, 2024
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
10 changes: 7 additions & 3 deletions apps/demo/partials/cardList.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<ul class="Grid Grid--cols-2 Grid--tablet--cols-3">
<div class="Container">

{{> @partial-block}}
<ul class="Grid Grid--cols-2 Grid--tablet--cols-3">

</ul>
{{> @partial-block}}

</ul>

</div>
2 changes: 0 additions & 2 deletions apps/demo/partials/web-react/layout/default.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@
{{> cover}}

<main class="py-1000">
<div class="Container">

{{> @partial-block }}

</div>
</main>

{{> footer}}
Expand Down
22 changes: 12 additions & 10 deletions apps/demo/partials/web/icons.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@

{{> web/tabs}}

<ul class="Grid Grid--cols-2 Grid--tablet--cols-4 Grid--desktop--cols-6 text-center my-1300">
{{#each @icons as |icon|}}
<li class="mb-700">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#{{icon}}"/>
</svg>
<p class="typography-body-medium-bold mt-600">{{icon}}</p>
</li>
{{/each}}
</ul>
<div class="Container">
<ul class="Grid Grid--cols-2 Grid--tablet--cols-4 Grid--desktop--cols-6 text-center my-1300">
{{#each @icons as |icon|}}
<li class="mb-700">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#{{icon}}"/>
</svg>
<p class="typography-body-medium-bold mt-600">{{icon}}</p>
</li>
{{/each}}
</ul>
</div>

{{/web/layout/default}}
2 changes: 0 additions & 2 deletions apps/demo/partials/web/layout/default.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@
{{> cover}}

<main class="py-1000">
<div class="Container">

{{> @partial-block}}

</div>
</main>

{{> footer}}
Expand Down
2 changes: 1 addition & 1 deletion apps/demo/partials/web/tabs.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="breakout-container d-grid">
<div class="d-grid">

<div class="ScrollView ScrollView--horizontal mb-800 mb-tablet-1100" data-spirit-toggle="scrollView" data-spirit-direction="vertical">
<div class="ScrollView__viewport" data-spirit-element="viewport">
Expand Down
22 changes: 13 additions & 9 deletions apps/web-twig-demo/templates/default.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,20 @@

{% include 'partials/tabs.html.twig' %}

<Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">
<Container>

{% for component in components %}
<li class="d-grid">
<a href="components/{{ component | lower }}/" class="docs-Card text-truncate">
{{ component }}
</a>
</li>
{% endfor %}
<Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">

</Grid>
{% for component in components %}
<li class="d-grid">
<a href="components/{{ component | lower }}/" class="docs-Card text-truncate">
{{ component }}
</a>
</li>
{% endfor %}

</Grid>

</Container>

{% endblock %}
22 changes: 13 additions & 9 deletions apps/web-twig-demo/templates/helpers.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,20 @@

{% include 'partials/tabs.html.twig' %}

<Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">
<Container>

{% for helper in helpers %}
<li class="d-grid">
<a href="helpers/{{ helper }}/" class="docs-Card text-truncate">
{{ helper | replace({'-': ' '}) | title }}
</a>
</li>
{% endfor %}
<Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">

</Grid>
{% for helper in helpers %}
<li class="d-grid">
<a href="helpers/{{ helper }}/" class="docs-Card text-truncate">
{{ helper | replace({'-': ' '}) | title }}
</a>
</li>
{% endfor %}

</Grid>

</Container>

{% endblock %}
2 changes: 0 additions & 2 deletions apps/web-twig-demo/templates/layout/default.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,9 @@
{%- endset -%}

<main class="py-1000">
<Container>

{{ renderedContent }}

</Container>
</main>

{% include 'partials/footer.html.twig' only %}
Expand Down
2 changes: 1 addition & 1 deletion apps/web-twig-demo/templates/partials/tabs.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% set isHelpersSelected = routeName == 'helpers_index' %}
{% set isValidationsSelected = routeName == 'validations_index' %}

<div class="breakout-container d-grid">
<div class="d-grid">
<ScrollView
direction="horizontal"
overflowDecorators="shadows"
Expand Down
74 changes: 39 additions & 35 deletions apps/web-twig-demo/templates/validations.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,45 @@

{% include 'partials/tabs.html.twig' %}

<Grid marginBottom="space-1600">
<GridItem columnStart="{{ { mobile: 2, tablet: 4, desktop: 5 } }}" columnEnd="{{ { mobile: 12, tablet: 10, desktop: 9 } }}">
<h2 class="docs-Heading">Real-World examples</h2>

<form id="form1" method="get" novalidate>
<Stack hasSpacing>
{% set usernameInputProps = { "data-spirit-required-message": "Please choose a username" }%}
<TextField isFluid name="username" id="username" label="Username" isRequired data-spirit-validate inputProps={ usernameInputProps } />
{% set zipcodeInputProps = { "data-spirit-pattern-message": "Invalid ZIP code", "data-spirit-pattern": "/d{5}|\d{3}[ ]?\d{2}/" }%}
<TextField isFluid name="zipcode" id="zipcode" label="Zip code" placeholder="123" data-spirit-validate inputProps={ zipcodeInputProps } />
{% set ageInputProps = { "data-spirit-min-message": "You must be at least 14-years-old", }%}
<TextField isFluid name="age" id="age" label="Your age (min. 14)" isRequired min="14" data-spirit-validate inputProps={ ageInputProps } />
{% set passwordInputProps = {
"data-spirit-required-message": "Please choose a password",
"data-spirit-pattern": "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/",
"data-spirit-pattern-message": "Minimum 8 characters, at least one uppercase letter, one lowercase letter and one number"
} %}
<TextField isFluid name="password" id="password" type="password" label="Password" isRequired data-spirit-validate inputProps={ passwordInputProps } />
{% set retypepasswordInputProps = {
"data-spirit-equals": "#password",
"data-spirit-equals-message": "Passwords don't match",
} %}
<TextField isFluid name="retypepassword" id="retypepassword" type="password" label="Retype password" isRequired data-spirit-validate inputProps={ retypepasswordInputProps } />
{% set emailInputProps = { "data-spirit-required-message": "Please enter your email", } %}
<TextField isFluid name="email" id="email" type="email" label="Email" isRequired data-spirit-validate inputProps={ emailInputProps } />
{% set phoneInputProps = { "data-spirit-pattern": "/^(?:\+\d{3}\s?)?(\d{3}\s?){3}$/", "data-spirit-pattern-message": "Invalid phone number", } %}
<TextField isFluid name="phone" id="phone" type="tel" label="phone" isRequired placeholder="+420 733 333 333" data-spirit-validate inputProps={ phoneInputProps } />
<Checkbox isFluid name="checkboxfield1" id="checkboxfield1" label="I accept the terms and conditions (required)" isRequired data-spirit-validate />
<div>
<Button type="submit" color="primary" isBlock>Submit</Button>
</div>
</Stack>
</form>
</GridItem>
</Grid>
<Container>

<Grid marginBottom="space-1600">
<GridItem columnStart="{{ { mobile: 2, tablet: 4, desktop: 5 } }}" columnEnd="{{ { mobile: 12, tablet: 10, desktop: 9 } }}">
<h2 class="docs-Heading">Real-World examples</h2>

<form id="form1" method="get" novalidate>
<Stack hasSpacing>
{% set usernameInputProps = { "data-spirit-required-message": "Please choose a username" }%}
<TextField isFluid name="username" id="username" label="Username" isRequired data-spirit-validate inputProps={ usernameInputProps } />
{% set zipcodeInputProps = { "data-spirit-pattern-message": "Invalid ZIP code", "data-spirit-pattern": "/d{5}|\d{3}[ ]?\d{2}/" }%}
<TextField isFluid name="zipcode" id="zipcode" label="Zip code" placeholder="123" data-spirit-validate inputProps={ zipcodeInputProps } />
{% set ageInputProps = { "data-spirit-min-message": "You must be at least 14-years-old", }%}
<TextField isFluid name="age" id="age" label="Your age (min. 14)" isRequired min="14" data-spirit-validate inputProps={ ageInputProps } />
{% set passwordInputProps = {
"data-spirit-required-message": "Please choose a password",
"data-spirit-pattern": "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/",
"data-spirit-pattern-message": "Minimum 8 characters, at least one uppercase letter, one lowercase letter and one number"
} %}
<TextField isFluid name="password" id="password" type="password" label="Password" isRequired data-spirit-validate inputProps={ passwordInputProps } />
{% set retypepasswordInputProps = {
"data-spirit-equals": "#password",
"data-spirit-equals-message": "Passwords don't match",
} %}
<TextField isFluid name="retypepassword" id="retypepassword" type="password" label="Retype password" isRequired data-spirit-validate inputProps={ retypepasswordInputProps } />
{% set emailInputProps = { "data-spirit-required-message": "Please enter your email", } %}
<TextField isFluid name="email" id="email" type="email" label="Email" isRequired data-spirit-validate inputProps={ emailInputProps } />
{% set phoneInputProps = { "data-spirit-pattern": "/^(?:\+\d{3}\s?)?(\d{3}\s?){3}$/", "data-spirit-pattern-message": "Invalid phone number", } %}
<TextField isFluid name="phone" id="phone" type="tel" label="phone" isRequired placeholder="+420 733 333 333" data-spirit-validate inputProps={ phoneInputProps } />
<Checkbox isFluid name="checkboxfield1" id="checkboxfield1" label="I accept the terms and conditions (required)" isRequired data-spirit-validate />
<div>
<Button type="submit" color="primary" isBlock>Submit</Button>
</div>
</Stack>
</form>
</GridItem>
</Grid>

</Container>

{{ encore_entry_script_tags('formValidations') }}

Expand Down
34 changes: 23 additions & 11 deletions packages/web-react/docs/DocsSections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,49 @@
import React, { ReactNode } from 'react';
import { StyleProps, Tag, useStyleProps } from '../src';
import { Container, StyleProps, Tag, useStyleProps } from '../src';
import DocsStack from './DocsStack';

interface DocsSectionProps extends StyleProps {
children: ReactNode;
container?: 'none' | 'all' | 'heading-only';
hasStack?: boolean;
stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
tag?: string;
title: string;
}

const defaultProps: Partial<DocsSectionProps> = {
container: 'all',
hasStack: true,
stackAlignment: 'start',
tag: '',
};

const DocsSection = (props: DocsSectionProps) => {
const propsWithDefaults = { ...defaultProps, ...props };
const { children, hasStack = true, stackAlignment = 'start', title, tag, ...restProps } = propsWithDefaults;
const { children, container, hasStack, stackAlignment, title, tag, ...restProps } = propsWithDefaults;
const { styleProps, props: transferProps } = useStyleProps(restProps);

const heading = (
<h2 className="docs-Heading">
{title}
{tag && (
<Tag color="warning" isSubtle>
{tag}
</Tag>
)}
</h2>
);

const content = (
<>
{container === 'heading-only' ? <Container>{heading}</Container> : heading}
{hasStack ? <DocsStack stackAlignment={stackAlignment}>{children}</DocsStack> : children}
</>
);

return (
<section {...styleProps} {...transferProps} className="UNSTABLE_Section">
<h2 className="docs-Heading">
{title}
{tag && (
<Tag color="warning" isSubtle>
{tag}
</Tag>
)}
</h2>
{hasStack ? <DocsStack stackAlignment={stackAlignment}>{children}</DocsStack> : children}
{container === 'all' ? <Container>{content}</Container> : content}
</section>
);
};
Expand Down
2 changes: 1 addition & 1 deletion packages/web-react/src/components/Button/demo/ButtonDemoFactory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const ButtonDemoFactory = ({ ...props }: ButtonBaseProps) => {
return (
<>
{sizes.map((size) => (
<DocsSection key={size} title={`Size ${size}`}>
<DocsSection key={size} title={`Size ${size}`} container="none">
{colors.map((color) => (
<div key={color}>
<Button size={size} color={color} elementType="a" {...props}>
Expand Down
2 changes: 1 addition & 1 deletion packages/web-react/src/components/ButtonLink/demo/ButtonLinkDemoFactory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const ButtonLinkDemoFactory = ({ ...props }: ButtonBaseProps) => {
return (
<>
{sizes.map((size) => (
<DocsSection key={size} title={`Size ${size}`}>
<DocsSection key={size} title={`Size ${size}`} container="none">
{colors.map((color) => (
<div key={color}>
<ButtonLink size={size} color={color} elementType="a" {...props}>
Expand Down
7 changes: 6 additions & 1 deletion packages/web-react/src/components/Container/demo/ContainerDefault.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import React from 'react';
import DocsBox from '../../../../docs/DocsBox';
import Container from '../Container';

const ContainerDefault = () => <DocsBox>Container</DocsBox>;
const ContainerDefault = () => (
<Container>
<DocsBox>Container</DocsBox>
</Container>
);

export default ContainerDefault;
2 changes: 1 addition & 1 deletion packages/web-react/src/components/Container/demo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import ContainerDefault from './ContainerDefault';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<DocsSection title="Default" stackAlignment="stretch">
<DocsSection title="Default" stackAlignment="stretch" container="heading-only">
<ContainerDefault />
</DocsSection>
</React.StrictMode>,
Expand Down
4 changes: 2 additions & 2 deletions packages/web-react/src/components/Footer/demo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ import FooterNested from './FooterNested';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<IconsProvider value={icons}>
<DocsSection title="Basic Usage" stackAlignment="stretch">
<DocsSection title="Basic Usage" stackAlignment="stretch" container="heading-only">
<FooterDefault />
</DocsSection>
<DocsSection title="Nested Link Blocks, Logo Only" stackAlignment="stretch">
<DocsSection title="Nested Link Blocks, Logo Only" stackAlignment="stretch" container="heading-only">
<FooterNested />
</DocsSection>
</IconsProvider>
Expand Down
10 changes: 5 additions & 5 deletions packages/web-react/src/components/Header/demo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@ import HeaderWithActionsAndDialog from './HeaderWithActionsAndDialog';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<IconsProvider value={icons}>
<DocsSection title="Minimal Header" stackAlignment="stretch">
<DocsSection title="Minimal Header" stackAlignment="stretch" container="heading-only">
<HeaderMinimal />
</DocsSection>
<DocsSection title="Header with Actions" stackAlignment="stretch">
<DocsSection title="Header with Actions" stackAlignment="stretch" container="heading-only">
<HeaderWithActions />
</DocsSection>
<DocsSection title="Header with Actions and Header Dialog" stackAlignment="stretch">
<DocsSection title="Header with Actions and Header Dialog" stackAlignment="stretch" container="heading-only">
<HeaderWithActionsAndDialog />
</DocsSection>
<DocsSection title="Simple Header" stackAlignment="stretch">
<DocsSection title="Simple Header" stackAlignment="stretch" container="heading-only">
<HeaderSimple />
</DocsSection>
<DocsSection title="Simple Transparent Header" stackAlignment="stretch">
<DocsSection title="Simple Transparent Header" stackAlignment="stretch" container="heading-only">
<HeaderSimpleTransparent />
</DocsSection>
<DocsSection title="Experimental RTL Support" stackAlignment="stretch">
Expand Down
2 changes: 1 addition & 1 deletion packages/web-react/src/components/Tag/demo/TagDefault.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const TagDefault = () => {
return (
<Grid cols={{ mobile: 1, tablet: 3, desktop: 5 }}>
{sizes.map((size) => (
<DocsSection key={size} title={`Size ${size}`}>
<DocsSection key={size} container="none" title={`Size ${size}`}>
{colors.map((color) => (
<Fragment key={`tag-${color}-${size}`}>
<Tag color={color} size={size} isSubtle>
Expand Down
Loading
Loading