Skip to content

Commit

Permalink
📖 Remove newlines inside paragraphs in Bento docs (#36902)
Browse files Browse the repository at this point in the history
  • Loading branch information
alanorozco committed Nov 11, 2021
1 parent 69b8021 commit 4fb8271
Show file tree
Hide file tree
Showing 13 changed files with 156 additions and 395 deletions.
63 changes: 21 additions & 42 deletions extensions/amp-accordion/1.0/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,13 @@

Displays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.

- A Bento Accordion accepts one or more `<section>` elements as its direct
children.
- A Bento Accordion accepts one or more `<section>` elements as its direct children.
- Each `<section>` must contain exactly two direct children.
- The first child in a `<section>` is the heading for that section of the
Bento Accordion. It must be a heading element such as `<h1>-<h6>` or
`<header>`.
- The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.
- The second child in a `<section>` is the expandable/collapsible content.
- It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).
- A click or tap on a `<section>` heading expands or collapses the section.
- A Bento Accordion with a defined `id` preserves the collapsed or expanded
state of each section while the user remains on your domain.
- A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.

## Web Component

Expand Down Expand Up @@ -104,10 +100,7 @@ const api = await accordion.getApi();

##### toggle()

The `toggle` action switches the `expanded` and `collapsed` states of
`bento-accordion` sections. When called with no arguments, it toggles all sections
of the accordion. To specify a specific section, add the `section` argument and
use its corresponding `id` as the value.
The `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.

```html
<bento-accordion id="myAccordion">
Expand Down Expand Up @@ -145,9 +138,7 @@ use its corresponding `id` as the value.

##### expand()

The `expand` action expands the sections of the `bento-accordion`. If a section
is already expanded, it stays expanded. When called with no arguments, it
expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.
The `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.

```html
<bento-accordion id="myAccordion">
Expand Down Expand Up @@ -185,10 +176,7 @@ expands all sections of the accordion. To specify a section, add the `section` a

##### collapse()

The `collapse` action collapses the sections of the `bento-accordion`. If a
section is already collapsed, it stays collapsed. When called with no arguments,
it collapses all sections of the accordion. To specify a section, add the
`section` argument, and use its corresponding `id` as the value.
The `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.

```html
<bento-accordion id="myAccordion">
Expand Down Expand Up @@ -342,8 +330,7 @@ Alternatively, you may also make the light-weight pre-upgrade styles available i

#### animate

Include the `animate` attribute in `<bento-accordion>` to add a "roll down"
animation when the content is expanded and "roll up" animation when collapsed.
Include the `animate` attribute in `<bento-accordion>` to add a "roll down" animation when the content is expanded and "roll up" animation when collapsed.

This attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).

Expand Down Expand Up @@ -412,19 +399,15 @@ Allow only one section to expand at a time by applying the `expand-single-sectio

### Styling

You may use the `bento-accordion` element selector to style the accordion
freely.
You may use the `bento-accordion` element selector to style the accordion freely.

Keep the following points in mind when you style an amp-accordion:

- `bento-accordion` elements are always `display: block`.
- `float` cannot style a `<section>`, heading, nor content elements.
- An expanded section applies the `expanded` attribute to the `<section>`
element.
- The content element is clear-fixed with `overflow: hidden` and hence cannot
have scrollbars.
- Margins of the `<bento-accordion>`, `<section>`, heading, and content elements
are set to `0`, but can be overridden in custom styles.
- An expanded section applies the `expanded` attribute to the `<section>` element.
- The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.
- Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.
- Both the header and content elements are `position: relative`.

---
Expand Down Expand Up @@ -512,10 +495,7 @@ The `BentoAccordion` API allows you to perform the following actions:

##### toggle()

The `toggle` action switches the `expanded` and `collapsed` states of
`bento-accordion` sections. When called with no arguments, it toggles all sections
of the accordion. To specify a specific section, add the `section` argument and
use its corresponding `id` as the value.
The `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.

```javascript
ref.current.toggle();
Expand All @@ -524,9 +504,7 @@ ref.current.toggle('section1');

##### expand()

The `expand` action expands the sections of the `bento-accordion`. If a section
is already expanded, it stays expanded. When called with no arguments, it
expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.
The `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.

```javascript
ref.current.expand();
Expand All @@ -535,10 +513,7 @@ ref.current.expand('section1');

##### collapse()

The `collapse` action collapses the sections of the `bento-accordion`. If a
section is already collapsed, it stays collapsed. When called with no arguments,
it collapses all sections of the accordion. To specify a section, add the
`section` argument, and use its corresponding `id` as the value.
The `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.

```javascript
ref.current.collapse();
Expand Down Expand Up @@ -636,24 +611,28 @@ Or via `className`:

##### animate

If true, then uses "roll-down" / "roll-up" animation during the expansion and collapse of each section
If true, then uses "roll-down" / "roll-up" animation during the expansion and collapse of each section.

Default: `false`

##### expandSingleSection

If true, then expanding 1 section will automatically collapse all other sections:
If true, then expanding 1 section will automatically collapse all other sections.

Default: `false`

#### BentoAccordionSection

##### animate

If true, then uses "roll-down" / "roll-up" animation during the expansion and collapse the section
If true, then uses "roll-down" / "roll-up" animation during the expansion and collapse the section.

Default: `false`

##### expanded

If true, expands the section.

Default: `false`

##### onExpandStateChange
Expand Down

0 comments on commit 4fb8271

Please sign in to comment.