{"id":39487858,"url":"https://github.com/vtex-apps/disclosure-layout","last_synced_at":"2026-01-18T05:29:20.812Z","repository":{"id":69223020,"uuid":"288541862","full_name":"vtex-apps/disclosure-layout","owner":"vtex-apps","description":"The Disclosure Layout app creates a layout structure based on disclosure indicators.","archived":false,"fork":false,"pushed_at":"2025-04-09T20:39:40.000Z","size":436,"stargazers_count":1,"open_issues_count":4,"forks_count":2,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-09T21:37:26.983Z","etag":null,"topics":["hacktoberfest","store-framework","vtex-io"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vtex-apps.png","metadata":{"files":{"readme":"docs/README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-18T19:09:00.000Z","updated_at":"2025-04-09T20:39:45.000Z","dependencies_parsed_at":"2025-04-09T21:27:59.340Z","dependency_job_id":"c599a5e0-6245-4307-bdad-5133391262c7","html_url":"https://github.com/vtex-apps/disclosure-layout","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/disclosure-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fdisclosure-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fdisclosure-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fdisclosure-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fdisclosure-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/disclosure-layout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fdisclosure-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","store-framework","vtex-io"],"created_at":"2026-01-18T05:29:20.713Z","updated_at":"2026-01-18T05:29:20.793Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"📢 Use this project, [contribute](https://github.com/vtex-apps/disclosure-layout) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).\n\n# Disclosure Layout\n\n\u003c!-- DOCS-IGNORE:start --\u003e\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\u003c!-- DOCS-IGNORE:end --\u003e\n\nThe Disclosure Layout app creates a layout structure based on disclosure indicators.\n\n![Disclosure Example](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-disclosure-layout-0.gif) [Check this example](https://github.com/vtex-apps/store-theme/pull/226)\n\n## Configuration\n\n### Step 1 - Adding the Disclosure Layout app to your theme dependencies\n\nIn the `manifest.json` file of your theme, add the Disclosure Layout app as a dependency:\n\n```diff\n  \"dependencies\": {\n+   \"vtex.disclosure-layout\": \"1.x\"\n  }\n```\n\nNow, you can use all the blocks exported by the `disclosure-layout` app. See the full list below:\n\n| Block name | Description |\n| - | - |\n| `disclosure-layout` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Parent block that enables you to build the disclosure layout using its three children blocks: `disclosure-trigger`, `disclosure-content`, and `disclosure-state-indicator`. |\n| `disclosure-trigger` | Declares the blocks that will be rendered as disclosure triggers, i.e., the blocks that, when clicked, will open or close the disclosure content (defined by the `disclosure-content` block). |\n| `disclosure-content` | Declares the blocks displaying the desired content when the disclosure trigger is clicked. |\n| `disclosure-state-indicator` | Optional block that renders the chevron or other UI elements that change when the disclosure is opened or closed. |\n| `disclosure-layout-group` | Wraps many `disclosure-layouts` blocks at once. You can use this block to control when each should be displayed, allowing only one `disclosure-layout` open at a time. |\n| `disclosure-trigger-group` | Wraps many `disclosure-trigger` blocks at once. You can use this block to control when and how the `disclosure-layouts` blocks declared inside the `disclosure-layout-group` should be displayed. |\n\n### Step 2 - Adding the Disclosure Layout blocks to your theme templates\n\nCopy one of the examples below and paste it into your desired theme template, changing as necessary. If needed, add the `disclosure-layout` block to the block list of the template.\n\n- Simple example:\n\n```json\n{\n  \"disclosure-layout#simple\": {\n    \"children\": [\"disclosure-trigger#simple\", \"disclosure-content#simple\"]\n  },\n  \"disclosure-trigger#simple\": {\n    \"children\": [\"rich-text#question\"]\n  },\n  \"disclosure-content#simple\": {\n    \"children\": [\"rich-text#answer\"]\n  },\n  \"rich-text#question\": {\n    \"props\": {\n      \"text\": \"How can I change my shipping address?\"\n    }\n  },\n  \"rich-text#answer\": {\n    \"props\": {\n      \"text\": \"Call us at (212) 123-1234\"\n    }\n  }\n}\n```\n\n- Example using the `disclosure-layout-group` block:\n\n```json\n{\n  \"disclosure-layout-group#group\": {\n    \"children\": [\"disclosure-layout#first\", \"disclosure-layout#second\"]\n  },\n\n  \"disclosure-layout#first\": {\n    \"children\": [\"disclosure-trigger#first\", \"disclosure-content#first\"]\n  },\n  \"disclosure-trigger#first\": {\n    \"children\": [\"rich-text#question1\"]\n  },\n  \"disclosure-content#first\": {\n    \"children\": [\"rich-text#answer1\"]\n  },\n  \"rich-text#question1\": {\n    \"props\": {\n      \"text\": \"How can I change my shipping address?\"\n    }\n  },\n  \"rich-text#answer1\": {\n    \"props\": {\n      \"text\": \"Call us at (212) 123-1234.\"\n    }\n  },\n\n  \"disclosure-layout#second\": {\n    \"children\": [\"disclosure-trigger#first\", \"disclosure-content#first\"]\n  },\n  \"disclosure-trigger#second\": {\n    \"children\": [\"rich-text#question1\"]\n  },\n  \"disclosure-content#second\": {\n    \"children\": [\"rich-text#answer1\"]\n  },\n  \"rich-text#question2\": {\n    \"props\": {\n      \"text\": \"How can I track my order?\"\n    }\n  },\n  \"rich-text#answer2\": {\n    \"props\": {\n      \"text\": \"After logging in to your account, you can find this information in the Orders link.\"\n    }\n  }\n}\n```\n\n- Example using the `disclosure-state-indicator` block:\n\n```json\n{\n  \"disclosure-state-indicator\": {\n    \"props\": {\n      \"Show\": \"icon-angle--down\",\n      \"Hide\": \"icon-angle--up\"\n    }\n  }\n}\n```\n\n#### `disclosure-layout` props\n\n| Prop name | Type | Description | Default value |\n| - | - | - | - |\n| `initialVisibility` | `enum` | Defines the initial visibility of the layout content. Possible values are: `visible` (content initially open) or `hidden` (content is only displayed with user interaction). | `hidden` |\n| `animated` | `boolean` | Defines if the layout content should have animations. When set as `true`, this prop will enable additional `data-\\*` attributes on the content, which you can use as selectors in CSS. It will also ensure that the element will be hidden once the transition has ended. | `false` |\n\n#### `disclosure-trigger` props\n\n| Prop name | Type | Description | Default value |\n| - | - | - | - |\n| `Show` | `block` | Name of the block that will be rendered when prompted to show the content. | `undefined` |\n| `Hide` | `block` | Name of the block that will be rendered when prompted to hide the content. | `undefined` |\n| `as` | `string` | HTML tag to be applied to the component when rendered on the UI. | `button` |\n| `children` | `block`  | Name of the block that will be rendered if no blocks are declared in the `Show` or `Hide` props. | `undefined` |\n| `blockClass` | `string` | Block ID defined by you that will be used in [CSS customizations](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization#using-the-blockclass-property). | `undefined` |\n\n#### `disclosure-content` props\n\n| Prop name | Type | Description | Default value |\n| - | - | - | - |\n| `blockClass` | `string` | Block ID defined by you that will be used in [CSS customizations](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization#using-the-blockclass-property). | `undefined` |\n| `children`   | `[block]` | List of blocks that will render the desired disclosure content. | `undefined` |\n\n#### `disclosure-state-indicator` props\n\n| Prop name | Type | Description | Default value |\n| - | - | - | - |\n| `Show` | `block` | Name of the block that will be rendered when prompted to show the content. | `undefined` |\n| `Hide` | `block` | Name of the block that will be rendered when prompted to hide the content. | `undefined` |\n\n#### `disclosure-layout-group` props\n\n| Prop name | Type | Description | Default value |\n| - | - | - | - |\n| `maxVisible` | `enum` | Defines how many `disclosure-layout` blocks should be displayed at a time. Possible values are: `one` (only one `disclosure-layout` block should have its content displayed at time) or `many` (different `disclosure-layout` block content can be displayed at time). | `one` |\n\n#### `disclosure-trigger-group` props\n\n| Prop name | Type | Description | Default value |\n| - | - | - | - |\n| `Show` | `block`  | Name of the block that will be rendered when prompted to show the content. | `undefined` |\n| `Hide` | `block`  | Name of the block that will be rendered when prompted to hide the content. | `undefined` |\n| `as` | `string` | HTML tag to be applied to the component when rendered on the UI. | `button`      |\n| `children` | `block`  | Name of the block that will be rendered if no blocks are declared in the `Show` or `Hide` props. | `undefined` |\n| `blockClass` | `string` | Block ID defined by you that will be used in [CSS customizations](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization#using-the-blockclass-property). | `undefined` |\n\n## Customization\n\nTo apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).\n\n| CSS handles             |\n| ----------------------- |\n| `content`               |\n| `content--visible`      |\n| `content--hidden`       |\n| `trigger`               |\n| `trigger--visible`      |\n| `trigger--hidden`       |\n| `triggerGroup`          |\n| `triggerGroup--visible` |\n| `triggerGroup--hidden`  |\n\n\u003c!-- DOCS-IGNORE:start --\u003e\n\n## Contributors ✨\n\nThanks goes to these wonderful people:\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!\n\n\u003c!-- DOCS-IGNORE:end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fdisclosure-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fdisclosure-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fdisclosure-layout/lists"}