diff --git a/packages/stacks-docs/_data/components/activity-indicator.json b/packages/stacks-docs/_data/components/activity-indicator.json index e476674582..01360eb956 100644 --- a/packages/stacks-docs/_data/components/activity-indicator.json +++ b/packages/stacks-docs/_data/components/activity-indicator.json @@ -1,8 +1,7 @@ { - "indicator": [ + "classes": [ { "class": ".s-activity-indicator", - "applies": "N/A", "description": "Base activity indicator element with theme-aware coloring" }, { @@ -25,5 +24,7 @@ "applies": ".s-activity-indicator", "description": "Styles the activity indicator in a small size" } - ] + ], + "examples": ["", "3", "12", "370", "new"], + "variants": ["success", "warning", "danger"] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/avatars-component.json b/packages/stacks-docs/_data/components/avatars.json similarity index 87% rename from packages/stacks-docs/_data/components/avatars-component.json rename to packages/stacks-docs/_data/components/avatars.json index 48c749b715..08e1e4b28c 100644 --- a/packages/stacks-docs/_data/components/avatars-component.json +++ b/packages/stacks-docs/_data/components/avatars.json @@ -2,27 +2,26 @@ "classes": [ { "class": ".s-avatar", - "applies": "N/A", "description": "The base avatar at 16px." }, { "class": ".s-avatar--image", - "applies": "N/A", + "parent": ".s-avatar", "description": "A child element for displaying a user’s profile image." }, { "class": ".s-avatar--letter", - "applies": "N/A", + "parent": ".s-avatar", "description": "A child element for displaying an abbreviated Team name." }, { "class": ".s-avatar--badge", - "applies": "N/A", + "parent": ".s-avatar", "description": "A child element that provides positioning to the shield on Team avatars." }, { "class": ".s-avatar--indicator", - "applies": "N/A", + "parent": ".s-avatar", "description": "A child element that provides positioning to the activity indicator on user's avatars." }, { @@ -55,5 +54,7 @@ "applies": ".s-avatar", "description": "Adds the proper border radius and scaling at 128px." } - ] + ], + "examples": [16, 24, 32, 48, 64, 96, 128], + "teamBgs": ["blue-400", "theme-primary", "png"] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/badges.json b/packages/stacks-docs/_data/components/badges.json index 509087a062..a58d11d86c 100644 --- a/packages/stacks-docs/_data/components/badges.json +++ b/packages/stacks-docs/_data/components/badges.json @@ -1,11 +1,87 @@ { + "classes": [ + { + "class": ".s-badge", + "description": "Base badge element." + }, + { + "class": ".s-badge__gold", + "applies": ".s-badge", + "description": "Badge indicating a gold award." + }, + { + "class": ".s-badge__silver", + "applies": ".s-badge", + "description": "Badge indicating a silver award." + }, + { + "class": ".s-badge__bronze", + "applies": ".s-badge", + "description": "Badge indicating a bronze award." + }, + { + "class": ".s-badge__important", + "applies": ".s-badge", + "description": "Applies important styling to the badge." + }, + { + "class": ".s-badge__squared", + "applies": ".s-badge", + "description": "Applies a background color to the badge's icon." + }, + { + "class": ".s-badge__info", + "applies": ".s-badge", + "description": "Badge indicating an info status." + }, + { + "class": ".s-badge__warning", + "applies": ".s-badge", + "description": "Badge indicating a warning status." + }, + { + "class": ".s-badge__danger", + "applies": ".s-badge", + "description": "Badge indicating a danger status." + }, + { + "class": ".s-badge__critical", + "applies": ".s-badge", + "description": "Badge indicating a critical status." + }, + { + "class": ".s-badge__tonal", + "applies": ".s-badge", + "description": "Badge indicating a tonal status." + }, + { + "class": ".s-badge__success", + "applies": ".s-badge", + "description": "Badge indicating a success status." + }, + { + "class": ".s-badge__featured", + "applies": ".s-badge", + "description": "Badge indicating a featured status." + }, + { + "class": ".s-badge__sm", + "applies": ".s-badge", + "description": "Applies a small size to the badge." + }, + { + "class": ".s-badge__lg", + "applies": ".s-badge", + "description": "Applies a large size to the badge." + } + ], "achievement": [ { "title": "Achievement", "classes": [ { "title": "Gold", - "class": "s-bling__gold", + "bling": "gold", "label": "Great Question", "html": "s-badge", "repType": "gold", @@ -13,7 +89,7 @@ }, { "title": "Silver", - "class": "s-bling__silver", + "bling": "silver", "label": "Favorite Question", "html": "s-badge", "repType": "silver", @@ -21,7 +97,7 @@ }, { "title": "Bronze", - "class": "s-bling__bronze", + "bling": "bronze", "label": "Altruist", "html": "s-badge", "repType": "bronze", @@ -162,26 +238,26 @@ { "title": "Warning", "icon": "Notification", - "html": "s-badge s-badge__squared s-badge__warning s-badge__important", + "classes": "s-badge__squared s-badge__warning s-badge__important", "label": "Needs attention", "description": "Warning badge styling in squared variant with important styling." }, { "title": "Danger", "icon": "VoteUp", - "html": "s-badge s-badge__danger s-badge__important", + "classes": "s-badge__danger s-badge__important", "label": "Ending soon", "description": "Danger badge styling with important styling." }, { "title": "Critical", - "html": "s-badge s-badge__critical s-badge__important", + "classes": "s-badge__critical s-badge__important", "label": "Spam", "description": "Critical badge styling with important styling." }, { "title": "Info", - "html": "s-badge s-badge__info s-badge__important", + "classes": "s-badge__info s-badge__important", "label": "+100", "description": "Info badge styling in small size with important styling." } @@ -194,43 +270,37 @@ "classes": [ { "title": "Admin", - "class": "s-badge__admin", - "html": "s-badge s-badge__admin", + "modifier": "admin", "label": "Admin", "description": "Badge indicating user is an admin." }, { "title": "Moderator", - "class": "s-badge__moderator", - "html": "s-badge s-badge__moderator", + "modifier": "moderator", "label": "Moderator", "description": "Badge indicating user is an moderator." }, { "title": "Staff", - "class": "s-badge__staff", - "html": "s-badge s-badge__staff", + "modifier": "staff", "label": "Staff", "description": "Badge indicating user is staff." }, { "title": "AI", - "class": "s-badge__ai", - "html": "s-badge s-badge__ai", + "modifier": "ai", "label": "AI", "description": "Badge indicating content is AI generated." }, { "title": "Bot", - "class": "s-badge__bot", - "html": "s-badge s-badge__bot", + "modifier": "bot", "label": "Bot", "description": "Badge indicating user is a bot." }, { "title": "New", - "class": "s-badge__new", - "html": "s-badge s-badge__new", + "modifier": "new", "label": "New", "description": "Badge indicating new user" } @@ -243,21 +313,19 @@ "classes": [ { "title": "Small", - "class": "s-badge__sm", - "html": "s-badge s-badge__sm s-badge__success", + "modifier": "sm", "label": "Small", "description": "The badge in small size." }, { "title": "Default", - "html": "s-badge s-badge__warning", + "modifier": "", "label": "Default", "description": "The badge in default size." }, { "title": "Large", - "class": "s-badge__lg", - "html": "s-badge s-badge__lg s-badge__danger", + "modifier": "lg", "label": "Large", "description": "The badge in large size." } diff --git a/packages/stacks-docs/_data/components/banners.json b/packages/stacks-docs/_data/components/banners.json index b40e208cca..d5250c7a2d 100644 --- a/packages/stacks-docs/_data/components/banners.json +++ b/packages/stacks-docs/_data/components/banners.json @@ -1,19 +1,23 @@ { - "system": [ + "classes": [ { "class": ".s-banner", - "applies": "N/A", "description": "Base banner parent class. This defaults to a system banner style." }, + { + "class": ".s-banner--actions", + "parent": ".s-banner", + "description": "Container styling for banner actions including the dismiss button." + }, { "class": ".s-banner--dismiss", - "applies": ".s-banner", + "parent": ".s-banner", "description": "Applies to child button element within the banner to position it appropriately." }, { - "class": ".s-banner--actions", + "class": ".s-banner__important", "applies": ".s-banner", - "description": "Container styling for banner actions including the dismiss button." + "description": "Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user." }, { "class": ".s-banner__info", @@ -46,9 +50,9 @@ "description": "Applies activity (pink) visual styles." }, { - "class": ".s-banner__important", + "class": ".is-pinned", "applies": ".s-banner", - "description": "Emboldens the above visual styles by strengthening the background saturation. This should be used for time-sensitive, pressing information that needs to be noticed by the user." + "description": "Pins the banner to the top of the browser window." } ] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/atomic/bling.json b/packages/stacks-docs/_data/components/bling.json similarity index 54% rename from packages/stacks-docs/_data/atomic/bling.json rename to packages/stacks-docs/_data/components/bling.json index 932e910ebe..14d1f7318f 100644 --- a/packages/stacks-docs/_data/atomic/bling.json +++ b/packages/stacks-docs/_data/components/bling.json @@ -1,4 +1,50 @@ { + "classes": [ + { + "class": ".s-bling", + "description": "Base bling element." + }, + { + "class": ".s-bling__gold", + "applies": ".s-bling", + "description": "Gold bling element." + }, + { + "class": ".s-bling__silver", + "applies": ".s-bling", + "description": "Silver bling element." + }, + { + "class": ".s-bling__bronze", + "applies": ".s-bling", + "description": "Bronze bling element." + }, + { + "class": ".s-bling__activity", + "applies": ".s-bling", + "description": "Activity bling element." + }, + { + "class": ".s-bling__filled", + "applies": ".s-bling", + "description": "Filled bling element." + }, + { + "class": ".s-bling__rep", + "applies": ".s-bling", + "description": "Reputation bling element." + }, + { + "class": ".s-bling__sm", + "applies": ".s-bling", + "description": "Small bling element." + }, + { + "class": ".s-bling__lg", + "applies": ".s-bling", + "description": "Large bling element." + } + ], "title": "Bling", "variants": ["default", "rep", "activity", "gold", "silver", "bronze"], "sizes": ["sm", "default", "lg"], diff --git a/packages/stacks-docs/_data/components/breadcrumbs.json b/packages/stacks-docs/_data/components/breadcrumbs.json index 891c7f6780..30da2b2a8c 100644 --- a/packages/stacks-docs/_data/components/breadcrumbs.json +++ b/packages/stacks-docs/_data/components/breadcrumbs.json @@ -2,22 +2,21 @@ "classes": [ { "class": ".s-breadcrumbs", - "applies": "N/A", "description": "Base parent container for breadcrumbs" }, { "class": ".s-breadcrumbs--item", - "applies": ".s-breadcrumbs", + "parent": ".s-breadcrumbs", "description": "Individual breadcrumb element containing a link and a divider" }, { "class": ".s-breadcrumbs--link", - "applies": ".s-breadcrumbs--item", + "parent": ".s-breadcrumbs--item", "description": "Breadcrumb link element" }, { "class": ".s-breadcrumbs--divider", - "applies": ".s-breadcrumbs--item", + "parent": ".s-breadcrumbs--item", "description": "Breadcrumb divider element" } ] diff --git a/packages/stacks-docs/_data/components/button-groups.json b/packages/stacks-docs/_data/components/button-groups.json index 11ee7a5c00..674877d5cd 100644 --- a/packages/stacks-docs/_data/components/button-groups.json +++ b/packages/stacks-docs/_data/components/button-groups.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-btn-group", - "applies": "N/A", "description": "Base button group style." } ], diff --git a/packages/stacks-docs/_data/components/buttons.json b/packages/stacks-docs/_data/components/buttons.json index a26062cb88..0c35ff7fff 100644 --- a/packages/stacks-docs/_data/components/buttons.json +++ b/packages/stacks-docs/_data/components/buttons.json @@ -1,4 +1,85 @@ { + "classes": [ + { + "class": ".s-btn", + "description": "Base button element" + }, + { + "class": ".s-btn--badge", + "parent": ".s-btn", + "description": "Badge container for the button" + }, + { + "class": ".s-btn__clear", + "applies": ".s-btn", + "description": "Clear button variant" + }, + { + "class": ".s-btn__danger", + "applies": ".s-btn", + "description": "Danger button variant" + }, + { + "class": ".s-btn__featured", + "applies": ".s-btn", + "description": "Featured button variant" + }, + { + "class": ".s-btn__tonal", + "applies": ".s-btn", + "description": "Tonal button variant" + }, + { + "class": ".s-btn__dropdown", + "applies": ".s-btn", + "description": "Dropdown button variant" + }, + { + "class": ".s-btn__icon", + "applies": ".s-btn", + "description": "Icon button variant" + }, + { + "class": ".s-btn__link", + "applies": ".s-btn", + "description": "Link button variant" + }, + { + "class": ".s-btn__unset", + "applies": ".s-btn", + "description": "Unset button variant" + }, + { + "class": ".s-btn__facebook", + "applies": ".s-btn", + "description": "Facebook button variant" + }, + { + "class": ".s-btn__github", + "applies": ".s-btn", + "description": "GitHub button variant" + }, + { + "class": ".s-btn__google", + "applies": ".s-btn", + "description": "Google button variant" + }, + { + "class": ".s-btn__xs", + "applies": ".s-btn", + "description": "Extra small button variant" + }, + { + "class": ".s-btn__sm", + "applies": ".s-btn", + "description": "Small button variant" + }, + { + "class": ".s-btn__lg", + "applies": ".s-btn", + "description": "Large button variant" + } + ], "base": [ { "title": "Base", diff --git a/packages/stacks-docs/_data/components/cards.json b/packages/stacks-docs/_data/components/cards.json new file mode 100644 index 0000000000..680cc4e800 --- /dev/null +++ b/packages/stacks-docs/_data/components/cards.json @@ -0,0 +1,13 @@ +{ + "classes": [ + { + "class": ".s-card", + "description": "Base card style." + }, + { + "class": ".s-card__muted", + "applies": ".s-card", + "description": "Muted card style." + } + ] +} \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/checkbox_radio.json b/packages/stacks-docs/_data/components/checkbox_radio.json index 1ec9b19c02..31c2f878fc 100644 --- a/packages/stacks-docs/_data/components/checkbox_radio.json +++ b/packages/stacks-docs/_data/components/checkbox_radio.json @@ -1,4 +1,26 @@ { + "checkbox-classes": [ + { + "class": ".s-checkbox", + "description": "Base checkbox style." + }, + { + "class": ".s-checkbox__checkmark", + "applies": ".s-checkbox", + "description": "Checkmark style." + } + ], + "radio-classes": [ + { + "class": ".s-radio", + "description": "Base radio style." + }, + { + "class": ".s-radio__checkmark", + "applies": ".s-radio", + "description": "Checkmark style." + } + ], "checkbox": [ { "description": "Unchecked checkbox.", diff --git a/packages/stacks-docs/_data/components/code-blocks.json b/packages/stacks-docs/_data/components/code-blocks.json index ceda5424a9..5861445073 100644 --- a/packages/stacks-docs/_data/components/code-blocks.json +++ b/packages/stacks-docs/_data/components/code-blocks.json @@ -2,8 +2,7 @@ "classes": [ { "class": ".s-code-block", - "applies": "N/A", - "description": "Adds proper styling to pre-formatted code." + "description": "Base code block style." }, { "class": ".linenums", @@ -13,7 +12,7 @@ { "class": ".linenums:<n>", "applies": ".s-code-block", - "description": "Adds a line numbers column to the code block starting at a number <n>." + "description": "Adds a line numbers column to the code block starting at a number <n>." } ] } diff --git a/packages/stacks-docs/_data/components/empty-states.json b/packages/stacks-docs/_data/components/empty-states.json new file mode 100644 index 0000000000..c9a9f26bb8 --- /dev/null +++ b/packages/stacks-docs/_data/components/empty-states.json @@ -0,0 +1,8 @@ +{ + "classes": [ + { + "class": ".s-empty-state", + "description": "Base empty state style." + } + ] +} \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/expandable.json b/packages/stacks-docs/_data/components/expandable.json new file mode 100644 index 0000000000..a8678863d7 --- /dev/null +++ b/packages/stacks-docs/_data/components/expandable.json @@ -0,0 +1,18 @@ +{ + "classes": [ + { + "class": ".s-expandable", + "description": "Container for the expandable content. Include an id attribute to be referenced by the expandable control." + }, + { + "class": ".s-expandable--content", + "parent": ".s-expandable", + "description": "Class for the expandable content. This is the content that will be shown and hidden when the expandable is toggled." + }, + { + "class": ".is-expanded", + "applies": ".s-expandable", + "description": "Expanded state class." + } + ] +} \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/link-previews.json b/packages/stacks-docs/_data/components/link-previews.json index 510b985493..48e259cbed 100644 --- a/packages/stacks-docs/_data/components/link-previews.json +++ b/packages/stacks-docs/_data/components/link-previews.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-link-preview", - "parent": "N/A", "description": "Base parent container for link previews" }, { @@ -10,21 +9,6 @@ "parent": ".s-link-preview", "description": "Top section containing the title and details" }, - { - "class": ".s-link-preview--icon", - "parent": ".s-link-preview--header", - "description": "Logo of the third party link. Use the @Svg.Helper." - }, - { - "class": ".s-link-preview--title", - "parent": ".s-link-preview--header", - "description": "Title of the linked file" - }, - { - "class": ".s-link-preview--details", - "parent": ".s-link-preview--header", - "description": "Details and meta data of the linked file" - }, { "class": ".s-link-preview--body", "parent": ".s-link-preview", @@ -40,10 +24,25 @@ "parent": ".s-link-preview", "description": "Bottom section containing URL details" }, + { + "class": ".s-link-preview--icon", + "parent": ".s-link-preview--header", + "description": "Logo of the third party link. Use the @Svg.Helper." + }, + { + "class": ".s-link-preview--title", + "parent": ".s-link-preview--header", + "description": "Title of the linked file." + }, + { + "class": ".s-link-preview--details", + "parent": ".s-link-preview--header", + "description": "Details and meta data of the linked file." + }, { "class": ".s-link-preview--url", "parent": ".s-link-preview--footer", - "description": "URL of the linked file" + "description": "URL of the linked file." }, { "class": ".s-link-preview--misc", @@ -55,5 +54,28 @@ "parent": ".s-link-preview--code", "description": "Added to the pre of the preview block to properly display line numbers" } - ] + ], + "examples": { + "base": { + "title": "Using hooks for a simple fetch request and breaking the rules of hooks, unsure how?", + "description": "Use for links whose expected body is rich text or markdown like Jira issues or Slack messages. Wherever possible, it’s best practice to support basic markdown formatting (bold, italics, line breaks, lists, etc.)", + "details": "Issue submitted by Ricky Otero on Aug 12, 2019 • RESOLVED", + "body": [ + "I'm trying to create a simple fetch with hooks from an AWS database. At the moment it errors out and the only reason I can see is because it breaks the rules of hooks but I'm not sure how. It's at the top level of this functional component and it's not called inside an event handler.", + "The result of this call (an array of user data), needs to be exported as a function and called in another file.", + "If anyone can spot something I have missed and can highlighted how I'm breaking the rules of hooks I'd be grateful!", + "Thanks!" + ], + "url": "https://stackoverflow.atlassian.net/projects/SREREQ/queues/custom/1", + "misc": "Privacy notice" + }, + "code": { + "title": "Gruntfile.js", + "description": "Use for links whose expected body is code like code files or GitHub Gists. In these scenarios, replace s-link-preview--body class with s-link-preview--code.", + "details": "Located in StackExchange / Stacks", + "code": "use strict;\n\nmodule.exports = function(grunt) {\n grunt.initConfig({\n pkg: grunt.file.readJSON('package.json'),\n version: '<%= pkg.version %>',\n\n // Shell commands for use in Grunt tasks\n shell: {\n eleventyBuild: {\n command: 'npx @11ty/eleventy',\n options: {\n stderr: false,\n execOptions: {\n cwd: 'docs'\n }\n }\n }\n }\n });\n\n grunt.loadNpmTasks('grunt-contrib-uglify');\n\n grunt.registerTask('default', ['uglify']);\n};", + "url": "https://github.com/StackExchange/Stacks/blob/develop/Gruntfile.js", + "misc": "(truncated)" + } + } } \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/links.json b/packages/stacks-docs/_data/components/links.json index ec624fcdcd..af30ee8a9a 100644 --- a/packages/stacks-docs/_data/components/links.json +++ b/packages/stacks-docs/_data/components/links.json @@ -1,8 +1,7 @@ { - "single-links": [ + "link-classes": [ { "class": ".s-link", - "applies": "N/A", "description": "Base link style that is used almost universally." }, { @@ -36,11 +35,10 @@ "description": "Applies a caret for dropdowns and additional interactivity." } ], - "descendent-anchors": [ + "anchors-classes": [ { "class": ".s-anchors", "name": "base", - "applies": "N/A", "description": "A consistent link style is applied to all descendent anchors.", "exampleClasses": "" }, diff --git a/packages/stacks-docs/_data/components/loader.json b/packages/stacks-docs/_data/components/loader.json index 05abfa09a8..a8a7dbdbad 100644 --- a/packages/stacks-docs/_data/components/loader.json +++ b/packages/stacks-docs/_data/components/loader.json @@ -2,13 +2,12 @@ "classes": [ { "class": ".s-loader", - "applies": "N/A", "description": "Base class for the loader component" }, { "class": ".s-loader--sr-text", - "applies": ".s-loader", - "description": "Child necessary to render the center loader block and renders the accessible text" + "parent": ".s-loader", + "description": "Necessary to render the center loader block and renders the accessible text" }, { "class": ".s-loader__sm", @@ -21,5 +20,21 @@ "description": "A large variant of the loader component" } ], + "sizes-classes": [ + { + "class": ".s-loader__sm", + "applies": ".s-loader", + "description": "
Loading…
" + }, + { + "class": ".s-loader", + "description": "
Loading…
" + }, + { + "class": ".s-loader__lg", + "applies": ".s-loader", + "description": "
Loading…
" + } + ], "sizes": ["s-loader__sm", "", "s-loader__lg"] } diff --git a/packages/stacks-docs/_data/components/menu.json b/packages/stacks-docs/_data/components/menus.json similarity index 83% rename from packages/stacks-docs/_data/components/menu.json rename to packages/stacks-docs/_data/components/menus.json index bf2ac129ef..24abbe7f7a 100644 --- a/packages/stacks-docs/_data/components/menu.json +++ b/packages/stacks-docs/_data/components/menus.json @@ -2,32 +2,31 @@ "classes": [ { "class": ".s-menu", - "applies": "N/A", "description": "Base container styling for a menu." }, { "class": ".s-menu--divider", - "applies": ".s-menu", + "parent": ".s-menu", "description": "Adds a divider line between menu sections." }, { "class": ".s-menu--item", - "applies": ".s-menu", + "parent": ".s-menu", "description": "Applies link styling to link within a menu. Used for actionable elements." }, { "class": ".s-menu--title", - "applies": ".s-menu", + "parent": ".s-menu", "description": "Adds appropriate styling for a title within a menu." }, { "class": ".s-menu--icon", - "applies": ".s-menu--item", + "parent": ".s-menu--item", "description": "Applies styling to an icon." }, { "class": ".s-menu--action", - "applies": ".s-menu--item", + "parent": ".s-menu--item", "description": "Applies link styling to link within a menu. Used for actionable elements." }, { diff --git a/packages/stacks-docs/_data/components/modals.json b/packages/stacks-docs/_data/components/modals.json index 83e461d876..9c9a92c9f3 100644 --- a/packages/stacks-docs/_data/components/modals.json +++ b/packages/stacks-docs/_data/components/modals.json @@ -2,43 +2,42 @@ "classes": [ { "class": ".s-modal", - "applies": "N/A", - "description": "Base parent container for modals" + "description": "Base parent container for modals." }, { - "class": ".s-modal__danger", - "applies": ".s-modal", - "description": "Adds styling for potentially dangerous actions" + "class": ".s-modal--dialog", + "parent": ".s-modal", + "description": "Creates a container that holds the modal dialog with proper padding and shadows." }, { - "class": ".s-modal--dialog", - "applies": "Child of .s-modal", - "description": "Creates a container that holds the modal dialog with proper padding and shadows" + "class": ".s-modal--body", + "parent": ".s-modal--dialog", + "description": "Adds proper styling to the modal dialog’s body text." }, { - "class": ".s-modal--header", - "applies": "Child of .s-modal--dialog", - "description": "Adds proper styling to the modal dialog’s header" + "class": ".s-modal--close", + "parent": ".s-modal--dialog", + "description": "Used to dismiss a modal." }, { - "class": ".s-modal--body", - "applies": "Child of .s-modal--dialog", - "description": "Adds proper styling to the modal dialog’s body text" + "class": ".s-modal--header", + "parent": ".s-modal--dialog", + "description": "Adds proper styling to the modal dialog’s header." }, { "class": ".s-modal--footer", - "applies": "Child of .s-modal--dialog", + "parent": ".s-modal--dialog", "description": "Adds the desired spacing to the row of button actions." }, { - "class": ".s-modal--close", - "applies": "Child of .s-modal--dialog", - "description": "Used to dismiss a modal" + "class": ".s-modal__danger", + "applies": ".s-modal", + "description": "Adds styling for potentially dangerous actions." }, { "class": ".s-modal__full", - "applies": ".s-modal--dialog", - "description": "Makes the .s-modal--dialog container take up as much of the screen as possible." + "applies": ".s-modal--dialog", + "description": "Makes the container take up as much of the screen as possible." } ] } diff --git a/packages/stacks-docs/_data/components/navigation.json b/packages/stacks-docs/_data/components/navigation.json index e60d4e5e79..69497aa379 100644 --- a/packages/stacks-docs/_data/components/navigation.json +++ b/packages/stacks-docs/_data/components/navigation.json @@ -2,53 +2,52 @@ "classes": [ { "class": ".s-navigation", - "applies": "N/A", - "description": "Base parent container for navigation" + "description": "Base parent container for navigation." }, { - "class": ".s-navigation__vertical", - "applies": ".s-navigation", - "description": "Renders the navigation vertically" - }, - { - "class": ".s-navigation__scroll", - "applies": ".s-navigation", - "description": "When the navigation items overflow the width of the component, enable horizontal scrolling. By default, navigation items will wrap. This should not be applied to vertical navigations." + "class": ".s-navigation--item", + "parent": ".s-navigation", + "description": "The individual item in a navigation" }, { - "class": ".s-navigation__sm", - "applies": ".s-navigation", - "description": "Tightens up the overall spacing and reduces the text size" + "class": ".s-navigation--avatar", + "parent": ".s-navigation--item", + "description": "Applies styling to the avatar of the navigation item" }, { - "class": ".s-navigation--item", - "applies": "Child of .s-navigation", - "description": "The individual item in a navigation" + "class": ".s-navigation--icon", + "parent": ".s-navigation--item", + "description": "Applies styling to the icon of the navigation item" }, { "class": ".s-navigation--item-text", - "applies": "Child of .s-navigation--item", + "parent": ".s-navigation--item", "description": "The element meant to contain the text of the navigation item" }, { - "class": ".s-navigation--icon", - "applies": "Child of .s-navigation--item", - "description": "Applies styling to the icon of the navigation item" + "class": ".s-navigation__scroll", + "applies": ".s-navigation", + "description": "When the navigation items overflow the width of the component, enable horizontal scrolling. By default, navigation items will wrap. This should not be applied to vertical navigations." }, { - "class": ".s-navigation--avatar", - "applies": "Child of .s-navigation--item", - "description": "Applies styling to the avatar of the navigation item" + "class": ".s-navigation__sm", + "applies": ".s-navigation", + "description": "Tightens up the overall spacing and reduces the text size" }, { - "class": ".is-selected", - "applies": ".s-navigation--item", - "description": "Applies to a navigation item that’s currently selected / active" + "class": ".s-navigation__vertical", + "applies": ".s-navigation", + "description": "Renders the navigation vertically." }, { "class": ".s-navigation--item__dropdown", - "applies": ".s-navigation--item", + "applies": ".s-navigation--item", "description": "Adds a small caret that indicates a dropdown" + }, + { + "class": ".is-selected", + "applies": ".s-navigation--item", + "description": "Applies to a navigation item that’s currently selected / active" } ], "navigation-attributes": [ diff --git a/packages/stacks-docs/_data/components/notices.json b/packages/stacks-docs/_data/components/notices.json index 59a24206d8..a994b4e7a6 100644 --- a/packages/stacks-docs/_data/components/notices.json +++ b/packages/stacks-docs/_data/components/notices.json @@ -1,101 +1,91 @@ { - "base": [ - { - "type": "default", - "icon": "Help" - }, - { - "type": "info", - "icon": "Info" - }, + "classes": [ { - "type": "success", - "icon": "Check" + "class": ".s-notice", + "context": ".s-toast when rendered as a toast", + "description": "Base notice parent class." }, { - "type": "warning", - "icon": "Alert" + "class": ".s-notice--actions", + "parent": ".s-notice", + "description": "Container styling for notice actions including the dismiss button." }, { - "type": "danger", - "icon": "AlertFill" + "class": ".s-notice--dismiss", + "parent": ".s-notice", + "description": "Applies to child button element within the notice to position it appropriately." }, { - "type": "featured", - "icon": "Star" + "class": ".s-notice__activity", + "applies": ".s-notice", + "description": "Applies activity (pink) visual styles." }, { - "type": "activity", - "icon": "Notification" - } - ], - "visual": [ - { - "class": ".s-notice", - "applies": "N/A", - "description": "Default style used to separate notices from the main content." + "class": ".s-notice__danger", + "applies": ".s-notice", + "description": "Applies danger (red) visual styles." }, { - "class": ".s-notice--dismiss", + "class": ".s-notice__featured", "applies": ".s-notice", - "description": "Applies to child button element within the banner to position it appropriately." + "description": "Applies featured (purple) visual styles." }, { - "class": ".s-notice--actions", + "class": ".s-notice__important", "applies": ".s-notice", - "description": "Container styling for notice actions including the dismiss button." + "description": "Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user." }, { "class": ".s-notice__info", "applies": ".s-notice", - "description": "Visual style for information notices." + "description": "Applies info (blue) visual styles." }, { "class": ".s-notice__success", "applies": ".s-notice", - "description": "Visual style for success notices." + "description": "Applies success (green) visual styles." }, { "class": ".s-notice__warning", "applies": ".s-notice", - "description": "Visual style for warning notices." + "description": "Applies warning (yellow) visual styles." }, { - "class": ".s-notice__danger", - "applies": ".s-notice", - "description": "Visual style for danger notices." + "class": ".s-toast", + "description": "Parent of .s-notice. See the Toast section for more information." + } + ], + "base": [ + { + "type": "default", + "icon": "Help" }, { - "class": ".s-notice__featured", - "applies": ".s-notice", - "description": "Visual style for featured notices." + "type": "info", + "icon": "Info" }, { - "class": ".s-notice__activity", - "applies": ".s-notice", - "description": "Visual style for activity notices." + "type": "success", + "icon": "Check" }, { - "class": ".s-notice__important", - "applies": ".s-notice", - "description": "Emboldens the above visual styles by strengthening the background saturation. This should be used for time-sensitive, pressing information that needs to be noticed by the user." - } - ], - "behavior": [ + "type": "warning", + "icon": "Alert" + }, { - "type": "Inline", - "class": ".s-notice", - "applies": "N/A", - "description": "Notice inserted within the content area." + "type": "danger", + "icon": "AlertFill" }, { - "type": "Toast", - "class": ".s-toast", - "applies": "Container", - "description": "Adds a container to properly fix a floating toast notice to the top-center of the page. These toasts typically disappear after a set time (i.e. 3 seconds)" + "type": "featured", + "icon": "Star" + }, + { + "type": "activity", + "icon": "Notification" } ], - "access": [ + "accessibility": [ { "item": "aria-labelledby=\"[id]\"", "applies": ".s-toast", @@ -132,5 +122,85 @@ "description": "A form of live region which contains advisory information but isn't important enough to justify an alert role. Elements with a status role have an implicit aria-live value of polite and implicit aria-atomic value of true. If the element controlling the status appears in a different area of the page, you must make the relationship explicit with the aria-controls attribute.", "url": "https://www.w3.org/TR/wai-aria-1.1/#status" } - ] + ], + "javascript": { + "attributes": [ + { + "item": "data-controller=\"s-toast\"", + "appliesText": "Controller element", + "description": "Wires up the element to the toast controller. This may be a .s-toast element or a wrapper element." + }, + { + "item": "data-s-toast-target=\"toast\"", + "appliesText": "Controller element", + "description": "Wires up the element that is to be shown/hidden" + }, + { + "item": "data-s-toast-target=\"initialFocus\"", + "appliesText": "Any child focusable element", + "description": "Designates which element to focus on toast show. If absent, defaults to the first focusable element within the toast." + }, + { + "item": "data-action=\"s-toast#toggle\"", + "appliesText": "Toggling element", + "description": "Wires up the element to toggle the visibility of a toast" + }, + { + "item": "data-s-toast-return-element=\"[css selector]\"", + "appliesText": "Controller element", + "description": "(optional) Designates the element to return focus to when the toast is closed. If left unset, focus is not altered on close." + }, + { + "item": "data-s-toast-remove-when-hidden=\"true\"", + "appliesText": "Controller element", + "description": "(optional) Removes the toast from the DOM entirely when it is hidden" + } + ], + "events": [ + { + "item": "s-toast:show", + "appliesText": "Toast target", + "description": "Fires immediately before showing the toast. Calling .preventDefault() cancels the display of the toast." + }, + { + "item": "s-toast:shown", + "appliesText": "Toast target", + "description": "Fires after the toast has been visually shown" + }, + { + "item": "s-toast:hide", + "appliesText": "Toast target", + "description": "Fires immediately before hiding the toast. Calling .preventDefault() cancels the removal of the toast." + }, + { + "item": "s-toast:hidden", + "appliesText": "Toast target", + "description": "Fires after the toast has been visually hidden" + } + ], + "eventDetails": [ + { + "item": "dispatcher", + "applies": "s-toast:*", + "description": "Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the toast that caused it to hide, etc." + }, + { + "item": "returnElement", + "applies": "s-toast:show,
s-toast:hide", + "description": "Contains the Element to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well." + } + ], + "helpers": [ + { + "item": "Stacks.showToast", + "appliesText": "element", + "description": "Helper to manually show an s-toast element via external JS" + }, + { + "item": "Stacks.hideToast", + "appliesText": "element", + "description": "Helper to manually hide an s-toast element via external JS" + } + ] + } } diff --git a/packages/stacks-docs/_data/components/page-titles.json b/packages/stacks-docs/_data/components/page-titles.json new file mode 100644 index 0000000000..7d290313ce --- /dev/null +++ b/packages/stacks-docs/_data/components/page-titles.json @@ -0,0 +1,32 @@ +{ + "classes": [ + { + "class": ".s-page-title", + "description": "Base class for the page title component." + }, + { + "class": ".s-page-title--actions", + "parent": ".s-page-title", + "description": "Contains the page actions." + }, + { + "class": ".s-page-title--text", + "parent": ".s-page-title", + "description": "Contains the page title and description." + }, + { + "class": ".s-page-title--description", + "parent": ".s-page-title--text", + "description": "Contains the page description." + }, + { + "class": ".s-page-title--header", + "parent": ".s-page-title--text", + "description": "Contains the page title." + } + ], + "example": { + "title": "Page title", + "description": "Optional description de Finibus Bonorum et Malorum with an optional link." + } +} \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/pagination-component.json b/packages/stacks-docs/_data/components/pagination-component.json index b9785252ee..1207d125bd 100644 --- a/packages/stacks-docs/_data/components/pagination-component.json +++ b/packages/stacks-docs/_data/components/pagination-component.json @@ -2,18 +2,17 @@ "classes": [ { "class": ".s-pagination", - "applies": "N/A", - "description": "Base pagination style that is used universally." + "description": "Base pagination style." }, { "class": ".s-pagination--item", - "applies": "N/A", - "description": "A child element that’s used as a link and labeled with the page number." + "parent": ".s-pagination", + "description": "A child element that's used as a link and labeled with the page number." }, { - "class": ".is-selected", + "class": ".s-pagination--item__clear", "applies": ".s-pagination--item", - "description": "Active state that’s applied to the current page." + "description": "Clears the background and removes any interactivity. Used for ellipses and descriptions." }, { "class": ".s-pagination--item__nav", @@ -21,9 +20,39 @@ "description": "Styles the Next or Previous button with a circular background and fixed dimensions. Typically used with an icon to indicate navigation to the next page." }, { - "class": ".s-pagination--item__clear", + "class": ".is-selected", "applies": ".s-pagination--item", - "description": "Clears the background and removes any interactivity. Used for ellipses and descriptions." + "description": "Active state that's applied to the current page." + } + ], + "examples": { + "base": { + "nextButton": true, + "previousButton": true, + "items": [ + { + "page": 1, + "classes": "is-selected" + }, + { + "page": 2 + }, + { + "page": 3 + }, + { + "page": 4 + }, + { + "page": 5 + }, + { + "page": "…" + }, + { + "page": 122386 + } + ] } - ] -} \ No newline at end of file + } +} diff --git a/packages/stacks-docs/_data/components/popovers.json b/packages/stacks-docs/_data/components/popovers.json index b14c792a3a..b82ef04c87 100644 --- a/packages/stacks-docs/_data/components/popovers.json +++ b/packages/stacks-docs/_data/components/popovers.json @@ -1,29 +1,166 @@ { - "automatic": [ + "classes": [ { "class": ".s-popover", - "applies": "N/A", "description": "Base parent container for popovers" }, + { + "class": ".s-popover--close", + "parent": ".s-popover", + "description": "Used to dismiss a popover" + }, + { + "class": ".s-popover--content", + "parent": ".s-popover", + "description": "Wrapper around the popover content to apply appropriate overflow styles" + }, { "class": ".s-popover__tooltip", - "applies": ".s-popover", + "applies": ".s-popover", "description": "Removes minimum size constraints to support shorter tooltip text" }, { "class": ".is-visible", - "applies": ".s-popover", + "applies": ".s-popover", "description": "This class toggles the popover visibility" + } + ], + "interactiveAttributes": [ + { + "item": "id=\"{POPOVER_ID}\"", + "applies": ".s-popover", + "description": "A unique id that the popover’s toggling element can target. Matches the value of [aria-controls] on the toggling element." }, { - "class": ".s-popover--close", - "applies": "Child of .s-popover", - "description": "Used to dismiss a popover" + "item": "data-controller=\"s-popover\"", + "appliesText": "Controller element", + "description": "Wires up the element to the popover controller. This may be a toggling element or a wrapper element." }, { - "class": ".s-popover--content", - "applies": "Child of .s-popover", - "description": "Wrapper around the popover content to apply appropriate overflow styles" + "item": "data-s-popover-reference-selector=\"[css selector]\"", + "appliesText": "Controller element", + "description": "(optional) Designates the element to use as the popover reference. If left unset, the value defaults to the controller element." + }, + { + "item": "aria-controls=\"{POPOVER_ID}\"", + "appliesText": "Reference element", + "description": "Associates the element to the desired popover element." + }, + { + "item": "data-action=\"s-popover#toggle\"", + "appliesText": "Toggling element", + "description": "Wires up the element to toggle the visibility of a generic popover." + }, + { + "item": "data-s-popover-toggle-class=\"[class list]\"", + "appliesText": "Controller element", + "description": "Adds an optional space-delineated list of classes to be toggled on the originating element when the popover is shown or hidden." + }, + { + "item": "data-s-popover-placement=\"[placement]\"", + "appliesText": "Controller element", + "description": "Dictates where to place the popover in relation to the reference element. By default, the placement value is bottom. Accepted placements are auto, top, right, bottom, left. Each placement can take an additional -start and -end variation." + }, + { + "item": "data-s-popover-auto-show=\"[true|false]\"", + "appliesText": "Controller element", + "description": "(optional) If true, the popover will appear immediately when the Stacks controller is first connected. This should be used in place of .is-visible for displaying popovers on load as it will prevent the popover from appearing before it has been correctly positioned." + }, + { + "item": "data-s-popover-hide-on-outside-click=\"[always|never|if-in-viewport|after-dismissal]\"", + "appliesText": "Controller element", + "description": "(optional) Default: always" + } + ], + "interactiveEvents": [ + { + "item": "s-popover:show", + "description": "Fires immediately before showing and positioning the popover. This fires before the popover is first displayed to the user, and can be used to create or initialize the popover element. Calling .preventDefault() cancels the display of the popover." + }, + { + "item": "s-popover:shown", + "description": "Fires immediately after showing the popover." + }, + { + "item": "s-popover:hide", + "description": "Fires immediately before hiding the popover. Calling .preventDefault() prevents the removal of the popover." + }, + { + "item": "s-popover:hidden", + "description": "Fires immediately after hiding the popover." + } + ], + "dispatchedEvents": [ + { + "item": "dispatcher", + "applies": "s-popover:*", + "description": "Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the popover that caused it to hide, etc." + } + ], + "tooltipHoverAttributes": [ + { + "item": "id=\"{POPOVER_ID}\"", + "applies": ".s-popover", + "description": "A unique id that the popover’s toggling element can target. Matches the value of [aria-describedby] on the toggling element." + }, + { + "item": "data-controller=\"s-tooltip\"", + "appliesText": "Controller element", + "description": "Wires up the element to the tooltip controller." + }, + { + "item": "data-s-tooltip-reference-selector=\"[css selector]\"", + "appliesText": "Controller element", + "description": "(optional) Designates the element to use as the tooltip reference. If left unset, the value defaults to the controller element." + }, + { + "item": "aria-describedby=\"{POPOVER_ID}\"", + "appliesText": "Reference element", + "description": "Associates the element to the desired popover element." + }, + { + "item": "title=\"{TITLE}\"", + "appliesText": "Controller element", + "description": "If aria-describedby is not present or valid, and the title attribute exists, the title will be removed from the element and be used to create a popover immediately after the element. All content will be escaped and inserted as text." + }, + { + "item": "data-s-tooltip-html-title=\"{TITLE}\"", + "appliesText": "Controller element", + "description": "Acts the exact same as the title attribute, but inserts the raw text directly as html. If both this and the title attribute exist on the element, this attribute will be used." + }, + { + "item": "data-s-tooltip-placement=\"[placement]\"", + "appliesText": "Controller element", + "description": "Dictates where to place the tooltip in relation to the reference element. By default, the placement value is bottom. Accepted placements are auto, top, right, bottom, left. Each placement can take an additional -start and -end variation." + } + ], + "tooltipHoverEvents": [ + { + "item": "s-tooltip:show", + "appliesText": "Controller element", + "description": "Default preventable Fires immediately before showing and positioning the tooltip. This fires before the tooltip is first displayed to the user, and can be used to create or initialize the tooltip element. Calling .preventDefault() cancels the display of the popover." + }, + { + "item": "s-tooltip:shown", + "appliesText": "Controller element", + "description": "Fires immediately after showing the tooltip." + }, + { + "item": "s-tooltip:hide", + "appliesText": "Controller element", + "description": "Default preventable Fires immediately before hiding the tooltip. Calling .preventDefault() prevents the removal of the tooltip." + }, + { + "item": "s-tooltip:hidden", + "appliesText": "Controller element", + "description": "Fires immediately after hiding the tooltip." + } + ], + "tooltipDispatchedEvents": [ + { + "item": "dispatcher", + "applies": "s-tooltip:*", + "description": "Contains the Element that initiated the event. For instance, the element hovered over to show, etc." } ] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/post-summary.json b/packages/stacks-docs/_data/components/post-summary.json index eb7d0604f4..c3282d8fd3 100644 --- a/packages/stacks-docs/_data/components/post-summary.json +++ b/packages/stacks-docs/_data/components/post-summary.json @@ -2,108 +2,107 @@ "classes": [ { "class": ".s-post-summary", - "applies": "N/A", "description": "Base parent container for a post summary" }, { - "class": ".s-post-summary__answered", - "applies": ".s-post-summary", - "description": "Adds the styling necessary for a question with accepted answers" + "class": ".s-post-summary--answers", + "parent": ".s-post-summary", + "description": "Container for the post summary answers" }, { - "class": ".s-post-summary__deleted", - "applies": ".s-post-summary", - "description": "Adds the styling necessary for a deleted post" + "class": ".s-post-summary--content", + "parent": ".s-post-summary", + "description": "Container for the post summary content" }, { - "class": ".s-post-summary--sm-hide", - "applies": ".s-post-summary", - "description": "Hides the stats container on small screens" + "class": ".s-post-summary--stats", + "parent": ".s-post-summary", + "description": "Container for the post summary stats" }, { - "class": ".s-post-summary--sm-show", - "applies": ".s-post-summary", - "description": "Shows the stats container on small screens" + "class": ".s-post-summary--tags", + "parent": ".s-post-summary", + "description": "Container for the post summary tags" }, { - "class": ".s-post-summary--answers", - "applies": ".s-post-summary", - "description": "Container for the post summary answers" + "class": ".s-post-summary--title", + "parent": ".s-post-summary", + "description": "Container for the post summary title" }, { "class": ".s-post-summary--answer", - "applies": ".s-post-summary--answers", + "parent": ".s-post-summary--answers", "description": "Container for the post summary answer" }, - { - "class": ".s-post-summary--answer__accepted", - "applies": ".s-post-summary--answer", - "description": "Adds the styling necessary for an accepted answer" - }, - { - "class": ".s-post-summary--content", - "applies": ".s-post-summary", - "description": "Container for the post summary content" - }, { "class": ".s-post-summary--content-meta", - "applies": ".s-post-summary--content", + "parent": ".s-post-summary--content", "description": "A container for post meta data, things like tags and user cards." }, { "class": ".s-post-summary--content-type", - "applies": ".s-post-summary--content", + "parent": ".s-post-summary--content", "description": "Container for the post summary content type" }, { "class": ".s-post-summary--excerpt", - "applies": ".s-post-summary--content", + "parent": ".s-post-summary--content", "description": "Container for the post summary excerpt" }, - { - "class": ".s-post-summary--stats", - "applies": ".s-post-summary", - "description": "Container for the post summary stats" - }, { "class": ".s-post-summary--stats-answers", - "applies": ".s-post-summary--stats", + "parent": ".s-post-summary--stats", "description": "Container for the post summary answers" }, { "class": ".s-post-summary--stats-bounty", - "applies": ".s-post-summary--stats", + "parent": ".s-post-summary--stats", "description": "Container for the post summary bounty" }, { "class": ".s-post-summary--stats-item", - "applies": ".s-post-summary--stats", + "parent": ".s-post-summary--stats", "description": "A genericcontainer for views, comments, read time, and other meta data which prepends a separator icon." }, { "class": ".s-post-summary--stats-votes", - "applies": ".s-post-summary--stats", + "parent": ".s-post-summary--stats", "description": "Container for the post summary votes" }, { - "class": ".s-post-summary--tags", - "applies": ".s-post-summary", - "description": "Container for the post summary tags" + "class": ".s-post-summary--title-link", + "parent": ".s-post-summary--title", + "description": "Link styling for the post summary title" }, { - "class": ".s-post-summary--title", + "class": ".s-post-summary--title-icon", + "parent": ".s-post-summary--title", + "description": "Icon styling for the post summary title" + }, + { + "class": ".s-post-summary--sm-hide", + "applies": ".s-post-summary > *", + "description": "Hides the stats container on small screens." + }, + { + "class": ".s-post-summary--sm-show", + "applies": ".s-post-summary > *", + "description": "Shows the stats container on small screens." + }, + { + "class": ".s-post-summary__answered", "applies": ".s-post-summary", - "description": "Container for the post summary title" + "description": "Adds the styling necessary for a question with accepted answers" }, { - "class": ".s-post-summary--title-link", - "applies": ".s-post-summary--title", - "description": "Link styling for the post summary title" + "class": ".s-post-summary__deleted", + "applies": ".s-post-summary", + "description": "Adds the styling necessary for a deleted post" }, { - "class": ".s-post-summary--title-icon", - "applies": ".s-post-summary--title", - "description": "Icon styling for the post summary title" + "class": ".s-post-summary--answer__accepted", + "applies": ".s-post-summary--answer", + "description": "Adds the styling necessary for an accepted answer" } ], "answered": { diff --git a/packages/stacks-docs/_data/components/progress-bars.json b/packages/stacks-docs/_data/components/progress-bars.json new file mode 100644 index 0000000000..f779241e60 --- /dev/null +++ b/packages/stacks-docs/_data/components/progress-bars.json @@ -0,0 +1,120 @@ +{ + "classes": [ + { + "class": ".s-progress", + "description": "The parent class for all progress bars." + }, + { + "class": ".s-progress--bar", + "parent": ".s-progress", + "description": "Shows the user’s current progress to accomplishing a goal with a background color." + }, + { + "class": ".s-progress--label", + "parent": ".s-progress", + "description": "Used to describe what progress bar is tracking." + }, + { + "class": ".s-progress--bar__left", + "parent": ".s-progress--step", + "description": "Draws a line on the left side of a step." + }, + { + "class": ".s-progress--bar__right", + "parent": ".s-progress--step", + "description": "Draws a line on the right side of a step." + }, + { + "class": ".s-progress--step", + "parent": ".s-progress--stepped", + "description": "Wrapper for each individual step." + }, + { + "class": ".s-progress__badge", + "applies": ".s-progress", + "description": "Styles the progress bar as a badge." + }, + { + "class": ".s-progress__brand", + "applies": ".s-progress", + "description": "Applies the brand color to the progress bar." + }, + { + "class": ".s-progress__circular", + "applies": ".s-progress", + "description": "Styles the progress bar as a circular progress bar." + }, + { + "class": ".s-progress__info", + "applies": ".s-progress", + "description": "Applies the info color to the progress bar." + }, + { + "class": ".s-progress__privilege", + "applies": ".s-progress", + "description": "Used to display a privilege progress bar." + }, + { + "class": ".s-progress__segmented", + "applies": ".s-progress", + "description": "Styles the progress bar as a segmented progress bar." + }, + { + "class": ".s-progress__stepped", + "applies": ".s-progress", + "description": "Styles the progress bar as a stepped progress bar." + }, + { + "class": ".s-progress__gold", + "applies": ".s-progress__badge", + "description": "Styles the progress bar as a gold badge." + }, + { + "class": ".s-progress__silver", + "applies": ".s-progress__badge", + "description": "Styles the progress bar as a silver badge." + }, + { + "class": ".s-progress__bronze", + "applies": ".s-progress__badge", + "description": "Styles the progress bar as a bronze badge." + }, + { + "class": ".is-active", + "applies": ".s-progress--step", + "description": "Styles the active step." + }, + { + "class": ".is-completed", + "applies": ".s-progress--step", + "description": "Styles the completed step." + } + ], + "parameters": [ + { + "item": "role=\"progressbar\"", + "applies": ".s-progress--bar", + "description": "This parameter communicates that element is displaying progress status that takes a long time or consists of several steps. (Source)" + }, + { + "item": "aria-valuemin", + "applies": ".s-progress--bar", + "description": "This parameter defines the minimum allowed value for the progress bar. (Source)" + }, + { + "item": "aria-valuemax", + "applies": ".s-progress--bar", + "description": "This parameter defines the maximum allowed value for the progress bar. (Source)" + }, + { + "item": "aria-valuenow", + "applies": ".s-progress--bar", + "description": "This parameter defines the current value for the progress bar. (Source)" + }, + { + "item": "style=\"width: [value]%\"", + "applies": ".s-progress--bar", + "description": "This parameter sets the width of the progress bar as a percentage. The value is the aria-valuenow value displayed as a percentage." + } + ] +} \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/prose.json b/packages/stacks-docs/_data/components/prose.json index faaaea6041..c924249209 100644 --- a/packages/stacks-docs/_data/components/prose.json +++ b/packages/stacks-docs/_data/components/prose.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-prose", - "applies": "N/A", "description": "Adds proper styling for rendered Markdown." }, { diff --git a/packages/stacks-docs/_data/components/select.json b/packages/stacks-docs/_data/components/select.json new file mode 100644 index 0000000000..05012ec9bb --- /dev/null +++ b/packages/stacks-docs/_data/components/select.json @@ -0,0 +1,33 @@ +{ + "classes": [ + { + "class": ".s-select", + "description": "Base select style." + }, + { + "class": ".s-select__sm", + "applies": ".s-select", + "description": "Apply a small size." + }, + { + "class": ".s-select__lg", + "applies": ".s-select", + "description": "Apply a large size." + }, + { + "class": ".has-error", + "applies": ".s-select", + "description": "Apply an error state." + }, + { + "class": ".has-success", + "applies": ".s-select", + "description": "Apply a success state." + }, + { + "class": ".has-warning", + "applies": ".s-select", + "description": "Apply a warning state." + } + ] +} diff --git a/packages/stacks-docs/_data/components/sidebar-widgets.json b/packages/stacks-docs/_data/components/sidebar-widgets.json new file mode 100644 index 0000000000..23871de9d6 --- /dev/null +++ b/packages/stacks-docs/_data/components/sidebar-widgets.json @@ -0,0 +1,23 @@ +{ + "classes": [ + { + "class": ".s-sidebarwidget", + "description": "Base sidebar widget style." + }, + { + "class": ".s-sidebarwidget--content", + "parent": ".s-sidebarwidget", + "description": "Container for the sidebar widget content." + }, + { + "class": ".s-sidebarwidget--header", + "parent": ".s-sidebarwidget", + "description": "Container for the sidebar widget header." + }, + { + "class": ".s-sidebarwidget--footer", + "parent": ".s-sidebarwidget", + "description": "Container for the sidebar widget footer." + } + ] +} diff --git a/packages/stacks-docs/_data/components/tables.json b/packages/stacks-docs/_data/components/tables.json index 3b68ebb323..bf30299c8a 100644 --- a/packages/stacks-docs/_data/components/tables.json +++ b/packages/stacks-docs/_data/components/tables.json @@ -1,4 +1,55 @@ { + "classes": [ + { + "class": ".s-table-container", + "description": "Container for the table." + }, + { + "class": ".s-table", + "parent": ".s-table-container", + "description": "Base table style." + }, + { + "class": ".s-table--cell:n", + "parent": ".s-table > tr > td", + "description": "Table cell width in 12 evenly divided columns. Replace :n with the number of columns the cell should span." + }, + { + "class": ".s-table__b0", + "applies": ".s-table", + "description": "Removes all table cell borders." + }, + { + "class": ".s-table__bx", + "applies": ".s-table", + "description": "Shows only horizontal table cell borders. Good for tables with lots of data that can be sorted and filtered." + }, + { + "class": ".s-table__bx-simple", + "applies": ".s-table", + "description": "Removes most of the default borders and backgrounds. Good for tables without much data that don't need to be sorted or filtered." + }, + { + "class": ".s-table__sortable", + "applies": ".s-table", + "description": "Applies styling to imply the table is sortable." + }, + { + "class": ".s-table__stripes", + "applies": ".s-table", + "description": "Apply zebra striping to the table." + }, + { + "class": ".s-table__sm", + "applies": ".s-table", + "description": "Apply a condensed sizing to the table." + }, + { + "class": ".s-table__lg", + "applies": ".s-table", + "description": "Apply a large sizing to the table." + } + ], "widths": [ { "class": ".s-table--cell1", @@ -51,32 +102,32 @@ ], "data-attributes": [ { - "attribute": "data-controller=\"s-table\"", + "item": "data-controller=\"s-table\"", "applies": "table", "description": "Wires up the table to the JS controller" }, { - "attribute": "data-s-table-target=\"column\"", + "item": "data-s-table-target=\"column\"", "applies": "th", "description": "Marks this is a sortable column for the purpose of modifying arrow icons" }, { - "attribute": "data-action=\"click->s-table#sort\"", + "item": "data-action=\"click->s-table#sort\"", "applies": "button", "description": "Causes a click on the header cell to sort by this column" }, { - "attribute": "data-s-table-sort-to=\"top\"", + "item": "data-s-table-sort-to=\"top\"", "applies": "tr", "description": "Forces the sorting of a row to the top" }, { - "attribute": "data-s-table-sort-to=\"bottom\"", + "item": "data-s-table-sort-to=\"bottom\"", "applies": "tr", "description": "Forces the sorting of a row to the bottom" }, { - "attribute": "data-s-table-sort-val=\"[x]\"", + "item": "data-s-table-sort-val=\"[x]\"", "applies": "td", "description": "Optionally use a custom value for sorting instead of the cell’s text content" } diff --git a/packages/stacks-docs/_data/components/tag.json b/packages/stacks-docs/_data/components/tag.json new file mode 100644 index 0000000000..dfa2aa131f --- /dev/null +++ b/packages/stacks-docs/_data/components/tag.json @@ -0,0 +1 @@ +{"classes":[{"class":".s-tag","description":"Base tag style that is used almost universally."},{"class":".s-tag__moderator","applies":".s-tag","description":"Exclusively used within Meta communities by moderators (and employees) to assign unique statuses to questions."},{"class":".s-tag__required","applies":".s-tag","description":"Exclusively used within Meta communities to denote the post type. One of these tags are required on all Meta posts."},{"class":".s-tag__ignored","applies":".s-tag","description":"Prepends an icon to indicate the tag is ignored."},{"class":".s-tag__watched","applies":".s-tag","description":"Prepends an icon to indicate the tag is watched."},{"class":".s-tag--dismiss","description":"A child element within .s-tag for a clear or dismiss action icon. When using this element, it should be rendered as a button containing the icon and the parent .s-tag should be rendered as a span element."},{"class":".s-tag--sponsor","description":"A child element within .s-tag that correctly positions a tag's sponsor logo."}],"sizes":[{"class":"s-tag__sm"},{"class":"N/A"},{"class":"s-tag__lg"}]} diff --git a/packages/stacks-docs/_data/components/tags-component.json b/packages/stacks-docs/_data/components/tags-component.json index edd7083660..d64b739a84 100644 --- a/packages/stacks-docs/_data/components/tags-component.json +++ b/packages/stacks-docs/_data/components/tags-component.json @@ -2,9 +2,18 @@ "classes": [ { "class": ".s-tag", - "applies": "N/A", "description": "Base tag style that is used almost universally." }, + { + "class": ".s-tag--dismiss", + "parent": ".s-tag", + "description": "For a clear or dismiss action icon. When using this element, it should be rendered as a button containing the icon and the parent .s-tag should be rendered as a span element." + }, + { + "class": ".s-tag--sponsor", + "parent": ".s-tag", + "description": "Correctly positions a tag’s sponsor logo." + }, { "class": ".s-tag__moderator", "applies": ".s-tag", @@ -26,14 +35,14 @@ "description": "Prepends an icon to indicate the tag is watched." }, { - "class": ".s-tag--dismiss", - "applies": "N/A", - "description": "A child element within .s-tag for a clear or dismiss action icon. When using this element, it should be rendered as a button containing the icon and the parent .s-tag should be rendered as a span element." + "class": ".s-tag__sm", + "applies": ".s-tag", + "description": "Apply a small size to the tag." }, { - "class": ".s-tag--sponsor", - "applies": "N/A", - "description": "A child element within .s-tag that correctly positions a tag’s sponsor logo." + "class": ".s-tag__lg", + "applies": ".s-tag", + "description": "Apply a large size to the tag." } ], "sizes": [ diff --git a/packages/stacks-docs/_data/components/topbar.json b/packages/stacks-docs/_data/components/topbar.json index 1a7adbb775..9927f42605 100644 --- a/packages/stacks-docs/_data/components/topbar.json +++ b/packages/stacks-docs/_data/components/topbar.json @@ -1,76 +1,78 @@ -[ - { - "class": ".s-topbar", - "description": "Base class" - }, - { - "class": ".s-topbar__light", - "applies": "`.s-topbar`", - "description": "Forced light theme" - }, - { - "class": ".s-topbar__dark", - "applies": "`.s-topbar`", - "description": "Forced dark theme" - }, - { - "class": ".s-topbar--skip-link", - "description": "Applied to an anchor tag for bypassing the top-level navigation links and jump to the main content on a page. [See WCAG Technique G1](https://www.w3.org/WAI/WCAG22/Techniques/general/G1)", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--container", - "description": "Add **atomic** `classes` here to customize internal content width; defaults to `.wmx12`", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--logo", - "description": "The logo. Can apply `.is-selected` to this", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--menu-btn", - "description": "Hamburger menu icon. Add `.is-selected` to turn it into an X", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--content", - "description": "Contains `li > .s-topbar--item` elements that don’t look like anything in particular", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--item", - "description": "A topbar item element with hover, active and focused styling. Can add `.is-selected`", - "applies": "Child of `.s-topbar--content > li`" - }, - { - "class": ".s-topbar--item__unset", - "description": "This class excludes the `.s-topbar--item` from any automatic styling. This is useful for calls to action, e.g. buttons or log in links", - "applies": "`.s-topbar--item`" - }, - { - "class": ".s-topbar--navigation", - "description": "Apply to `nav` to ensure proper layout", - "applies": "Parent of `.s-topbar--container`" - }, - { - "class": ".s-topbar--notice", - "description": "A badge-styled notice that stands out. Add `.is-unread` to make it stand out more", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--searchbar", - "description": "Contains a search input and an optional `.s-select`. Hides itself on mobile.", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--searchbar--input-group", - "description": "Holds the search input + icon", - "applies": "Child of `.s-topbar--searchbar`" - }, - { - "class": ".s-topbar--searchbar__open", - "applies": "`.s-topbar--searchbar`", - "description": "On mobile, this class shows the search input below the topbar. Toggle this class with a button" - } -] +{ + "classes": [ + { + "class": ".s-topbar", + "description": "Base class" + }, + { + "class": ".s-topbar--container", + "parent": ".s-topbar", + "description": "Add atomic classes here to customize internal content width; defaults to `.wmx12`" + }, + { + "class": ".s-topbar--skip-link", + "parent": ".s-topbar", + "description": "Applied to an anchor tag for bypassing the top-level navigation links and jump to the main content on a page. See WCAG Technique G1" + }, + { + "class": ".s-topbar--logo", + "parent": ".s-topbar--container", + "description": "The logo. Can apply .is-selected to this" + }, + { + "class": ".s-topbar--menu-btn", + "parent": ".s-topbar--container", + "description": "Hamburger menu icon. Add .is-selected to turn it into an X" + }, + { + "class": ".s-topbar--navigation", + "parent": ".s-topbar--container", + "description": "Apply to nav to ensure proper layout." + }, + { + "class": ".s-topbar--notice", + "parent": ".s-topbar--container", + "description": "A badge-styled notice that stands out. Add .is-unread to make it stand out more." + }, + { + "class": ".s-topbar--searchbar", + "parent": ".s-topbar--container", + "description": "Contains a search input and an optional `.s-select`. Hides itself on mobile." + }, + { + "class": ".s-topbar--content", + "parent": ".s-topbar--navigation", + "description": "Contains li > .s-topbar--item elements that don’t look like anything in particular" + }, + { + "class": ".s-topbar--item", + "parent": ".s-topbar--content > li", + "description": "A topbar item element with hover, active and focused styling. Can add `.is-selected`" + }, + { + "class": ".s-topbar--searchbar--input-group", + "parent": ".s-topbar--searchbar", + "description": "Holds the search input + icon." + }, + { + "class": ".s-topbar--item__unset", + "applies": ".s-topbar--item", + "description": "This class excludes the .s-topbar--item from any automatic styling. This is useful for calls to action, e.g. buttons or log in links." + }, + { + "class": ".s-topbar--searchbar__open", + "applies": ".s-topbar--searchbar", + "description": "On mobile, this class shows the search input below the topbar. Toggle this class with a button." + }, + { + "class": ".s-topbar__light", + "applies": ".s-topbar", + "description": "Applies a forced light theme" + }, + { + "class": ".s-topbar__dark", + "applies": ".s-topbar", + "description": "Applies a forced dark theme" + } + ] +} diff --git a/packages/stacks-docs/_data/components/uploader-component.json b/packages/stacks-docs/_data/components/uploader-component.json deleted file mode 100644 index 59744aebc4..0000000000 --- a/packages/stacks-docs/_data/components/uploader-component.json +++ /dev/null @@ -1,59 +0,0 @@ -{ - "classes": [ - { - "class": ".s-uploader", - "applies": "N/A", - "description": "Base uploader element" - }, - { - "class": ".is-active", - "applies": ".s-uploader", - "description": "Active styling for uploader element. Added on dragenter or when input has value." - }, - { - "class": ".is-disabled", - "applies": ".s-uploader", - "description": "Appropriately styles the uploader when it is disabled. Don’t forget to also add the disabled attribute on the input itself." - }, - { - "class": ".has-error", - "applies": ".s-uploader", - "description": "Adds error styling to the component." - }, - { - "class": ".has-success", - "applies": ".s-uploader", - "description": "Adds success styling to the component." - }, - { - "class": ".has-warning", - "applies": ".s-uploader", - "description": "Adds warning styling to the component." - }, - { - "class": ".s-uploader--container", - "applies": "Child of .s-uploader", - "description": "Container for the visual elements of the uploader." - }, - { - "class": ".s-uploader--input", - "applies": "Child of .s-uploader", - "description": "Adds proper styling to the uploader's file input. Visually hidden." - }, - { - "class": ".s-uploader--previews", - "applies": "Child of .s-uploader--container", - "description": "Container for selected item(s) preview." - }, - { - "class": ".s-uploader--preview", - "applies": "Child of .s-uploader--previews", - "description": "An image or string to preview a selected file." - }, - { - "class": ".s-uploader--reset", - "applies": "Child of .s-uploader--container", - "description": "Used to reset the uploader." - } - ] -} diff --git a/packages/stacks-docs/_data/components/uploader.json b/packages/stacks-docs/_data/components/uploader.json new file mode 100644 index 0000000000..943ad8c242 --- /dev/null +++ b/packages/stacks-docs/_data/components/uploader.json @@ -0,0 +1,105 @@ +{ + "classes": [ + { + "class": ".s-uploader", + "description": "Base uploader element" + }, + { + "class": ".s-uploader--container", + "parent": ".s-uploader", + "description": "Container for the visual elements of the uploader." + }, + { + "class": ".s-uploader--input", + "parent": ".s-uploader--container", + "description": "Adds proper styling to the uploader's file input. Visually hidden." + }, + { + "class": ".s-uploader--previews", + "parent": ".s-uploader--container", + "description": "Container for selected item(s) preview." + }, + { + "class": ".s-uploader--reset", + "parent": ".s-uploader--container", + "description": "Used to reset the uploader." + }, + { + "class": ".s-uploader--preview", + "parent": ".s-uploader--previews", + "description": "An image or string to preview a selected file." + }, + { + "class": ".is-active", + "applies": ".s-uploader", + "description": "Active styling for uploader element. Added on dragenter or when input has value." + }, + { + "class": ".is-disabled", + "applies": ".s-uploader", + "description": "Appropriately styles the uploader when it is disabled. Don’t forget to also add the disabled attribute on the input itself." + }, + { + "class": ".has-error", + "applies": ".s-uploader", + "description": "Adds error styling to the component." + }, + { + "class": ".has-success", + "applies": ".s-uploader", + "description": "Adds success styling to the component." + }, + { + "class": ".has-warning", + "applies": ".s-uploader", + "description": "Adds warning styling to the component." + } + ], + "attributes": [ + { + "item": "data-controller=\"s-uploader\"", + "appliesText": "Controller element", + "description": "Wires up the element to the uploader controller. This may be a .s-uploader element or a wrapper element." + }, + { + "item": "data-target=\"s-uploader.uploader\"", + "applies": ".s-uploader", + "description": "Wires up the element containing input, previews, and reset targets." + }, + { + "item": "data-s-uploader-target=\"input\"", + "applies": ".s-uploader--input", + "description": "Designates the file input element." + }, + { + "item": "data-target=\"s-uploader.previews\"", + "applies": ".s-uploader--previews", + "description": "Designates the element to act as a container to file preview(s)." + }, + { + "item": "data-action=\"input->s-uploader#handleInput\"", + "applies": "input[type=file]", + "description": "Wires up the element to provide files for preview on change." + }, + { + "item": "data-action=\"click->s-uploader#reset\"", + "appliesText": "Any child element", + "description": "Wires up the element to reset the uploader to its initial state." + }, + { + "item": "data-s-uploader-show-on-input", + "appliesText": "Any child element", + "description": "Toggles element visibility. Shows when input has value." + }, + { + "item": "data-s-uploader-hide-on-input", + "appliesText": "Any child element", + "description": "Toggles element visibility. Hides when input has value." + }, + { + "item": "data-s-uploader-enable-on-input", + "appliesText": "Any child element", + "description": "Toggles element disabled state. Disables when input has no value." + } + ] +} diff --git a/packages/stacks-docs/_data/components/user-card.json b/packages/stacks-docs/_data/components/user-cards.json similarity index 93% rename from packages/stacks-docs/_data/components/user-card.json rename to packages/stacks-docs/_data/components/user-cards.json index f9480e792d..28239baa72 100644 --- a/packages/stacks-docs/_data/components/user-card.json +++ b/packages/stacks-docs/_data/components/user-cards.json @@ -2,53 +2,57 @@ "classes": [ { "class": ".s-user-card", - "applies": "N/A", "description": "Base user card container that applies the basic style." }, - { - "class": ".s-user-card--group", - "applies": "N/A", - "description": "A container for group elements." - }, - { - "class": ".s-user-card--group__split", - "applies": "Modifier for
.s-user-card--group", - "description": "Inserts a separator between each element." - }, { "class": ".s-user-card--column", - "applies": "N/A", + "applies": ".s-user-card > *", "description": "A container for column elements." }, { - "class": ".s-user-card--row", - "applies": "N/A", + "class": ".s-user-card--row", + "applies": ".s-user-card > *", "description": "A container for row elements." }, + { + "class": ".s-user-card--group", + "applies": ".s-user-card > *", + "description": "A container for group elements." + }, { "class": ".s-user-card--bio", - "applies": "N/A", "description": "Container for the user's bio." }, { "class": ".s-user-card--recognition", - "applies": "N/A", "description": "Container for recognition by a collective." }, { "class": ".s-user-card--rep", - "applies": "N/A", "description": "Container for the user's reputation." }, { "class": ".s-user-card--time", - "applies": "N/A", "description": "Container for the user's timestamp." }, { "class": ".s-user-card--username", - "applies": "N/A", "description": "Container for the user's username." + }, + { + "class": ".s-user-card__sm", + "applies": ".s-user-card", + "description": "Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies." + }, + { + "class": ".s-user-card__lg", + "applies": ".s-user-card", + "description": "Use the large variant when space permits and more detailed information is desired." + }, + { + "class": ".s-user-card--group__split", + "applies": ".s-user-card--group", + "description": "Inserts a separator between each element." } ], "base": [ @@ -204,18 +208,17 @@ ], "sizes": [ { - "size": "small", "class": ".s-user-card__sm", + "appliesText": "small", "description": "Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies." }, { - "size": "default", - "class": "N/A", + "item": "N/A", "description": "Use the default variant when the user needs a more primary focus of the content. This style features a larger avatar to establish top-level hierarchy like question and answer authors." }, { - "size": "large", "class": ".s-user-card__lg", + "appliesText": "large", "description": "Use the large variant when space permits and more detailed information is desired" } ], diff --git a/packages/stacks-docs/_data/components/vote.json b/packages/stacks-docs/_data/components/vote.json index b69212a0a2..0ef4d634bf 100644 --- a/packages/stacks-docs/_data/components/vote.json +++ b/packages/stacks-docs/_data/components/vote.json @@ -2,43 +2,42 @@ "classes": [ { "class": ".s-vote", - "applies": "N/A", "description": "Base vote component." }, - { - "class": ".s-vote__expanded", - "applies": ".s-vote", - "description": "Expanded vote style that shows upvote and downvote counts separately." - }, - { - "class": ".s-vote__horizontal", - "applies": ".s-vote", - "description": "Horizontal vote style that arranges buttons and counts in a row. This layout does not officially support downvoting or expanded vote count." - }, { "class": ".s-vote--btn", - "applies": ".s-vote", + "parent": ".s-vote", "description": "Vote button." }, { "class": ".s-vote--votes", - "applies": ".s-vote", + "parent": ".s-vote", "description": "Container for vote counts." }, { - "class": ".s-vote--upvotes", - "applies": ".s-vote--votes", - "description": "Upvote count." + "class": ".s-vote--downvotes", + "parent": ".s-vote--votes", + "description": "Downvote count." }, { "class": ".s-vote--total", - "applies": ".s-vote--votes", + "parent": ".s-vote--votes", "description": "Total vote count." }, { - "class": ".s-vote--downvotes", - "applies": ".s-vote--votes", - "description": "Downvote count." + "class": ".s-vote--upvotes", + "parent": ".s-vote--votes", + "description": "Upvote count." + }, + { + "class": ".s-vote__expanded", + "applies": ".s-vote", + "description": "Expanded vote style that shows upvote and downvote counts separately." + }, + { + "class": ".s-vote__horizontal", + "applies": ".s-vote", + "description": "Horizontal vote style that arranges buttons and counts in a row. This layout does not officially support downvoting or expanded vote count." } ], "groups": { diff --git a/packages/stacks-docs/_includes/docs-table.html b/packages/stacks-docs/_includes/docs-table.html new file mode 100644 index 0000000000..52fd1928b8 --- /dev/null +++ b/packages/stacks-docs/_includes/docs-table.html @@ -0,0 +1,137 @@ +{% comment %} + Reusable classes reference table (Class | Applied to | Description). + Set docsItems in parent scope. Column header classes default as below; override by + setting classColClasses, appliesColClasses, or descriptionColClasses before including. + + Usage: + {% assign docsItems = itemType.items %} + {% include "docs-table.html" %} + Override one column: {% assign appliesColClasses = "s-table--cell4" %} +{% endcomment %} +{% if tableId == nil %} + {% assign tableId = "docs-table" %} +{% endif %} +{% if col1Classes == nil %} + {% assign col1Classes = "s-table--cell3" %} +{% endif %} +{% if col2Classes == nil %} + {% assign col2Classes = "s-table--cell2" %} +{% endif %} +{% if col3Classes == nil %} + {% assign col3Classes = "s-table--cell2" %} +{% endif %} +{% if col4Classes == nil %} + {% assign col4Classes = "" %} +{% endif %} +{% if col1Heading == nil %} + {% assign col1Heading = "Class" %} +{% endif %} +{% if col2Heading == nil %} + {% assign col2Heading = "Parent" %} +{% endif %} +{% if col3Heading == nil %} + {% assign col3Heading = "Modifies" %} +{% endif %} +{% if col4Heading == nil %} + {% assign col4Heading = "Description" %} +{% endif %} +{% if expandableBtnText == nil %} + {% assign expandableBtnText = "Show all classes" %} +{% endif %} +{% assign expandableClassesTable = expandableClassesTable | default: false %} +
+ + + + {% if col1Heading != "" %} + + {% endif %} + {% if col2Heading != "" %} + + {% endif %} + {% if col3Heading != "" %} + + {% endif %} + {% if col4Heading != "" %} + + {% endif %} + + + + {% for item in docsItems %} + + {% if col1Heading != "" %} + + {% endif %} + {% if col2Heading != "" %} + + {% endif %} + {% if col3Heading != "" %} + + {% endif %} + {% if col4Heading != "" %} + + {% endif %} + + {% endfor %} + +
+ {{ col1Heading }} + + {{ col2Heading }} + + {{ col3Heading }} + + {{ col4Heading }} +
+ {{ item.class | default: item.item }} + + {% if item.context or item.parent %} + {% if item.context %} + {{ item.context }} + {% endif %} + {% if item.parent %} + {{ item.parent }} + {% endif %} + {% else %} + N/A + {% endif %} + + {% if item.appliesText or item.applies %} + {% if item.appliesText %} + {{ item.appliesText }} + {% endif %} + {% if item.applies %} + {{ item.applies }} + {% endif %} + {% else %} + N/A + {% endif %} + {{ item.description }}
+
+{% if expandableClassesTable %} + +{% endif %} + + +{% assign tableId = nil %} +{% assign col1Classes = nil %} +{% assign col2Classes = nil %} +{% assign col3Classes = nil %} +{% assign col4Classes = nil %} +{% assign col1Heading = nil %} +{% assign col2Heading = nil %} +{% assign col3Heading = nil %} +{% assign col4Heading = nil %} +{% assign expandableBtnText = nil %} +{% assign expandableClassesTable = nil %} diff --git a/packages/stacks-docs/assets/js/global.navigation.js b/packages/stacks-docs/assets/js/global.navigation.js index 0a090de58a..ca6df65ff3 100644 --- a/packages/stacks-docs/assets/js/global.navigation.js +++ b/packages/stacks-docs/assets/js/global.navigation.js @@ -8,6 +8,19 @@ $(document).ready(function() { e.preventDefault(); }); + // Docs table "Show all classes" - use delegation so it works after sidebar nav AJAX load + $(document).on("click", ".js-docs-table-expand", function() { + var button = $(this); + var tableId = button.attr("aria-controls"); + var table = tableId ? document.getElementById(tableId) : null; + if (table) { + button.addClass("d-none"); + button.attr("aria-expanded", "true"); + table.classList.remove("v-truncate", "v-truncate-fade", "overflow-auto"); + table.classList.add("overflow-x-auto"); + } + }); + function regenerateMenu () { // Hide the navigation if we've opened it hamburgerBtn.removeClass("is-selected"); diff --git a/packages/stacks-docs/assets/less/stacks-documentation.less b/packages/stacks-docs/assets/less/stacks-documentation.less index adfc54f394..629f9d6611 100644 --- a/packages/stacks-docs/assets/less/stacks-documentation.less +++ b/packages/stacks-docs/assets/less/stacks-documentation.less @@ -93,7 +93,6 @@ h2, h3 { background-color: var(--black-150); border: var(--su1) solid var(--black-200); border-radius: var(--su2); - color: var(--green-600); font-family: var(--ff-mono); overflow-wrap: break-word; margin: var(--sun1); @@ -172,7 +171,7 @@ h2, h3 { color: var(--black-500); - font-size: var(--fs-body3); + font-size: var(--fs-body2); line-height: 1.5; margin-bottom: var(--su16); margin-top: 0; @@ -235,10 +234,6 @@ h2, h3 { --_dt-c: var(--green-400); } - code { - font-size: 1em; - } - min-width: var(--su344); } diff --git a/packages/stacks-docs/product/components/activity-indicator.html b/packages/stacks-docs/product/components/activity-indicator.html index 6012439c2c..2d959746d4 100644 --- a/packages/stacks-docs/product/components/activity-indicator.html +++ b/packages/stacks-docs/product/components/activity-indicator.html @@ -7,31 +7,14 @@ tags: components --- -{% assign examples = " ,3,12,370,new" | split: "," %} -
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in activity-indicator.indicator %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{% if item.applies == "N/A" %}{{ item.applies }}{% else %}{{ item.applies }}{% endif %}{{ item.description }}
-
+ {% assign docsItems = activity-indicator.classes %} + {% assign col3Classes = "s-table--cell4" %} + {% assign col2Heading = "" %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %} {% header "h3", "Default" %} @@ -92,7 +75,7 @@ {% endhighlight %}
- {% for example in examples %} + {% for example in activity-indicator.examples %}
{{ example }}
New activity
@@ -146,11 +129,10 @@
{% endhighlight %}
- {% assign variants = "success,warning,danger" | split: "," %}
- {% for variant in variants %} + {% for variant in activity-indicator.variants %}
- {% for example in examples %} + {% for example in activity-indicator.examples %}
{{ example }}
New activity
diff --git a/packages/stacks-docs/product/components/avatars.html b/packages/stacks-docs/product/components/avatars.html index b5e6600b90..ef110c14c0 100644 --- a/packages/stacks-docs/product/components/avatars.html +++ b/packages/stacks-docs/product/components/avatars.html @@ -6,29 +6,14 @@ description: Avatars are used to quickly identify users or teams. tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in avatars-component.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = avatars.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %} {% header "h3", "Users" %} @@ -64,85 +49,31 @@ {% endhighlight %}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + {% for example in avatars.examples %} + + + + + + {% endfor %} +
- 16px - default - - - demo avatar - -
- 24px - .s-avatar__24 - - - demo avatar - -
- 32px - .s-avatar__32 - - - demo avatar - -
- 48px - .s-avatar__48 - - - demo avatar - -
- 64px - .s-avatar__64 - - - demo avatar - -
- 96px - .s-avatar__96 - - - demo avatar - -
- 128px - .s-avatar__128 - - - demo avatar - -
+ {{ example }}px + + {% if example == "16" %}default{% else %}.s-avatar__{{ example }}{% endif %} + + + demo avatar + +
@@ -170,34 +101,35 @@ {% endhighlight %}
- - - - - - - - + + + + + + + + + {% for example in avatars.examples %} + {% if example == 16 or example == 24 %} + + + + + + {% endif %} + {% endfor %} +
- 16px - default - - -
-
Online
-
- demo avatar - -
- 24px - .s-avatar__24 - - -
-
Online
-
- demo avatar - -
+ {{ example }}px + + {% if example == 16 %}default{% else %}.s-avatar__{{ example }}{% endif %} + + +
+
Online
+
+ demo avatar + +
@@ -254,202 +186,55 @@ {% endhighlight %}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
- 16px - default - - -
- - {% icon "ShieldXSm", "native s-avatar--badge" %} -
- Hum - - 		- -
- - {% icon "ShieldXSm", "native s-avatar--badge" %} -
- Hum - - 		- -
- - {% icon "ShieldXSm", "native s-avatar--badge" %} -
- Hum - -
- 24px - .s-avatar__24 - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - -
- 32px - .s-avatar__32 - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - -
- 48px - .s-avatar__48 - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - -
- 64px - .s-avatar__64 - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - -
- 96px - .s-avatar__96 - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - -
- 128px - .s-avatar__128 - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - -
+ + + + + + + + + + + {% for example in avatars.examples %} + + + + {% for bgColor in avatars.teamBgs %} + + {% endfor %} + + {% endfor %} +
+ {{ example }}px + + {% if example == "16" %}default{% else %}.s-avatar__{{ example }}{% endif %} + + {% if example == 16 %} + +
+ {% if bgColor == "png" %} + + {% else %} + + {% endif %} + {% icon "ShieldXSm", "native s-avatar--badge" %} +
+ Hum + + {% else %} + + {% if bgColor == "png" %} + + {% else %} + + Hum + {% endif %} + {% icon "ShieldXSm", "native s-avatar--badge" %} + + {% endif %} +
diff --git a/packages/stacks-docs/product/components/badges.html b/packages/stacks-docs/product/components/badges.html index a69e5e3562..c4392d6a01 100644 --- a/packages/stacks-docs/product/components/badges.html +++ b/packages/stacks-docs/product/components/badges.html @@ -6,6 +6,15 @@ description: Badges are labels used for flags, earned achievements, and number totals. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsItems = badges.classes %} + {% assign col2Heading = "" %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+
{% header "h2", "Styles" %} {% header "h3", "Default" %} @@ -115,7 +124,6 @@ Example - Class Description @@ -132,14 +140,6 @@ {{ type.label }} - -
- .s-badge > - {% if type.class != nil %} - .{{ type.class }} - {% endif %} -
- {{ type.description }} {% endfor %} @@ -179,7 +179,7 @@ Example - Class + Modifier class Description @@ -198,7 +198,6 @@
- .s-badge {% if type.class != nil %} .{{ type.class }} {% endif %} @@ -262,7 +261,7 @@ Example - Class + Modifier class Description @@ -282,12 +281,10 @@
- .s-badge {% if type.class != nil %} .{{ type.class }} - {% endif %} - {% if badge.class != nil %} - .{{ badge.class }} + {% else %} + N/A {% endif %}
@@ -320,7 +317,7 @@ Example - Class + Modifier classes Description @@ -337,13 +334,12 @@
- .s-badge - {% if type.class != nil %} - .{{ type.class }} - {% endif %} {% if badge.class != nil %} .{{ badge.class }} {% endif %} + {% if type.class != nil %} + .{{ type.class }} + {% endif %}
{{ type.description }} @@ -381,7 +377,7 @@ Example - Class + Modifier classes Description @@ -391,7 +387,7 @@ {% for type in types %} - + {% if type.icon != nil %} {% icon type.icon %} {{ type.label }} @@ -402,7 +398,7 @@
- {% assign classes = type.html | split: " " %} + {% assign classes = type.classes | split: " " %} {% for class in classes %} .{{ class }} {% endfor %} @@ -444,13 +440,12 @@ {% for type in types %} - {{ type.label }} + {{ type.label }}
- .s-badge - {% if type.class != nil %} - .{{ type.class }} + {% if type.modifier != nil %} + .s-badge__{{ type.modifier }} {% endif %}
@@ -484,7 +479,7 @@ Examples - Class + Modifier class Description @@ -494,15 +489,14 @@ {% for type in types %} - + {{ type.label }}
- .s-badge - {% if type.class != nil %} - .{{ type.class }} + {% if type.modifier != nil %} + .s-badge__{{ type.modifier }} {% endif %}
diff --git a/packages/stacks-docs/product/components/banners.html b/packages/stacks-docs/product/components/banners.html index 4d11045433..8afefd623a 100644 --- a/packages/stacks-docs/product/components/banners.html +++ b/packages/stacks-docs/product/components/banners.html @@ -2,166 +2,28 @@ layout: page title: Banners figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=5982-7648&m=dev -description: Banners are a type of notice, delivering both system and engagement messaging. These are highly intrusive messaging methods and so should be used appropriately. +description: Banners are full-width notices used for system and engagement messaging. They are highly intrusive and should be used only when essential information needs to be conveyed to the user. tags: components --- - - - +
+ {% header "h2", "Classes" %} + {% assign docsItems = banners.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+ {% header "h2", "Usage guidelines" %}

System banners are used for system messaging. They are full-width notices placed in one of two locations:

    -
  1. Above everything else: If the system banner is related to the entire website (e.g. the website is in read-only), place the banner first. These cannot be dismissed until the issue is resolved. To pin a system banner to the top of the browser window, add .is-pinned.
    2. +
  2. Pinned: If the system banner is related to the entire website (e.g. the website is in read-only), above all other content including the topbar. To pin a system banner to the top of the browser window, add .is-pinned.
  3. Below the top navigation bar: This is the default location for all system banners. Use these banners when it affects only a particular area of the product (e.g. when a product subscription is about to expire).
-

Since system banners are a type of notice, you can use the following notice visual styles in conjunction with .s-banner:

+

Refer to the Classes section for more information on how to apply the correct styles to the banner.

- {% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in banners.system %} - - - - - - {% endfor %} - -
ClassApplies toDescription
{{ item.class }}{% if item.applies == "N/A" %}{{ item.applies }}{% else %}{{ item.applies }}{% endif %}{{ item.description }}
-
- {% header "h2", "JavaScript" %} -

The .s-banner component includes a controller to show and hide the banner programitically. While it is optional, at least including the functionality to close the banner is recommended.

- - {% header "h3", "Attributes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeApplied toDescription
data-controller="s-banner"Controller elementWires up the element to the banner controller. This may be a .s-banner element or a wrapper element.
data-s-banner-target="banner".s-banner elementWires up the element that is to be shown/hidden
data-s-banner-remove-when-hidden="true"Controller elementOptional Removes the banner from the DOM entirely when it is hidden
-
- {% header "h3", "Events" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EventElementDescription
s-banner:showBanner targetDefault preventable Fires immediately before showing the banner. Calling .preventDefault() cancels the display of the banner.
s-banner:shownBanner targetFires after the banner has been visually shown
s-banner:hideBanner targetDefault preventable Fires immediately before hiding the banner. Calling .preventDefault() cancels the removal of the banner.
s-banner:hiddenBanner targetFires after the banner has been visually hidden
-
-
- - - - - - - - - - - - - - - -
event.detailApplicable eventsDescription
dispatchers-banner:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the banner that caused it to hide, etc.
-
- {% header "h3", "Helpers" %} -
- - - - - - - - - - - - - - - - - - - - -
FunctionParametersDescription
Stacks.showBanner - element: the element the data-controller="s-banner" attribute is on

- 		Helper to manually show an s-banner element via external JS
Stacks.hideBanner - element: the element the data-controller="s-banner" attribute is on

- 		Helper to manually hide an s-banner element via external JS
-
- {% header "h2", "Examples" %}
@@ -315,3 +177,133 @@
+ + +
+ {% header "h2", "JavaScript" %} +

The .s-banner component includes a controller to show and hide the banner programitically. While it is optional, at least including the functionality to close the banner is recommended.

+ + {% header "h3", "Attributes" %} +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeApplied toDescription
data-controller="s-banner"Controller elementWires up the element to the banner controller. This may be a .s-banner element or a wrapper element.
data-s-banner-target="banner".s-banner elementWires up the element that is to be shown/hidden
data-s-banner-remove-when-hidden="true"Controller elementOptional Removes the banner from the DOM entirely when it is hidden
+
+ {% header "h3", "Events" %} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventElementDescription
s-banner:showBanner targetDefault preventable Fires immediately before showing the banner. Calling .preventDefault() cancels the display of the banner.
s-banner:shownBanner targetFires after the banner has been visually shown
s-banner:hideBanner targetDefault preventable Fires immediately before hiding the banner. Calling .preventDefault() cancels the removal of the banner.
s-banner:hiddenBanner targetFires after the banner has been visually hidden
+
+
+ + + + + + + + + + + + + + + +
event.detailApplicable eventsDescription
dispatchers-banner:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the banner that caused it to hide, etc.
+
+ {% header "h3", "Helpers" %} +
+ + + + + + + + + + + + + + + + + + + + +
FunctionParametersDescription
Stacks.showBanner + element: the element the data-controller="s-banner" attribute is on

+ 		Helper to manually show an s-banner element via external JS
Stacks.hideBanner + element: the element the data-controller="s-banner" attribute is on

+ 		Helper to manually hide an s-banner element via external JS
+
+
+ + + + + + \ No newline at end of file diff --git a/packages/stacks-docs/product/components/bling.html b/packages/stacks-docs/product/components/bling.html index 5aece75f53..d09767ecef 100644 --- a/packages/stacks-docs/product/components/bling.html +++ b/packages/stacks-docs/product/components/bling.html @@ -5,6 +5,15 @@ description: Bling is used to indicate award type in badges, topbar, and user cards. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsItems = bling.classes %} + {% assign col2Heading = "" %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+
{% header "h2", "Types" %}

Use the clear bling variant only when its associated color is already present in the component, such as within a colored tag badge or alongside a filled element.

diff --git a/packages/stacks-docs/product/components/breadcrumbs.html b/packages/stacks-docs/product/components/breadcrumbs.html index 16576359c3..d8e975a573 100644 --- a/packages/stacks-docs/product/components/breadcrumbs.html +++ b/packages/stacks-docs/product/components/breadcrumbs.html @@ -5,29 +5,16 @@ description: Breadcrumbs are used to provide context for the currently-viewed page. tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in breadcrumbs.classes %} - - - - - - {% endfor %} - -
ClassParentDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = breadcrumbs.classes %} + {% assign col1Classes = "s-table--cell4"%} + {% assign col2Classes = "s-table--cell3"%} + {% assign col3Heading = "" %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %}

Breadcrumbs show users where they are within a site’s hierarchy. Breadcrumbs help orient the user and allow for navigation to previous page levels. It can be appropriate to use a breadcrumb when:

diff --git a/packages/stacks-docs/product/components/button-groups.html b/packages/stacks-docs/product/components/button-groups.html index 6821683192..e7a4e704a5 100644 --- a/packages/stacks-docs/product/components/button-groups.html +++ b/packages/stacks-docs/product/components/button-groups.html @@ -5,29 +5,16 @@ description: Button groups are a collection of buttons. This component is used in our questions view, and is frequently used in conjunction with other form elements such as search fields and sorting dropdowns. If the content you’re interacting with is a simple paring down or filter of the current view, it’s appropriate to use the .s-btn-group component. Add the class .is-selected and the aria-current attribute with the appropriate value to show the currently selected button. tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in button-groups.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = button-groups.classes %} + {% assign col2Heading = "" %} + {% assign col3Heading = "" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Button attributes" %} {% for item in button-groups.button-attributes %} diff --git a/packages/stacks-docs/product/components/buttons.html b/packages/stacks-docs/product/components/buttons.html index 8d2c8f4640..962db59106 100644 --- a/packages/stacks-docs/product/components/buttons.html +++ b/packages/stacks-docs/product/components/buttons.html @@ -6,6 +6,14 @@ description: Buttons are user interface elements which allows users to take actions throughout the project. It is important that they have ample click space and help communicate the importance of their actions. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsItems = buttons.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+
{% header "h2", "Styles" %}

Stacks provides 3 different button styles:

diff --git a/packages/stacks-docs/product/components/cards.html b/packages/stacks-docs/product/components/cards.html index 2521ef0d98..3212c2dec2 100644 --- a/packages/stacks-docs/product/components/cards.html +++ b/packages/stacks-docs/product/components/cards.html @@ -5,6 +5,14 @@ description: Cards are used to group similar concepts and tasks together to make information easier to scan, read, and act on. Cards should use a heading that sets clear expectations about the card’s purpose, paragraphs that put the most critical information first, and (optionally) calls to action on the bottom to direct user action. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsItems = cards.classes %} + {% assign col2Heading = "" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Base" %}

The base card styling applies a border and padding to the card.

diff --git a/packages/stacks-docs/product/components/checkbox.html b/packages/stacks-docs/product/components/checkbox.html index 6e07623089..8207c58a9c 100644 --- a/packages/stacks-docs/product/components/checkbox.html +++ b/packages/stacks-docs/product/components/checkbox.html @@ -6,6 +6,15 @@ description: Checkable inputs that visually allow for multiple options or true/false values. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsItems = checkbox_radio.checkbox-classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Heading = "" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Base" %} diff --git a/packages/stacks-docs/product/components/code-blocks.html b/packages/stacks-docs/product/components/code-blocks.html index 56018d9a3b..ed0e7e48fc 100644 --- a/packages/stacks-docs/product/components/code-blocks.html +++ b/packages/stacks-docs/product/components/code-blocks.html @@ -4,28 +4,13 @@ description: Stacks provides styling for code blocks with syntax highlighting provided by highlight.js. Special care was taken to make sure our light and dark themes felt like Stack Overflow while maintaining near AAA color contrasts and still being distinguishable for those with a color vision deficiency. tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in code-blocks.classes %} - - - - - - {% endfor %} - -
ClassApplies toOutput
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = code-blocks.classes %} + {% assign col2Heading = "" %} + {% assign col3Classes = "s-table--cell3" %} + {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/empty-states.html b/packages/stacks-docs/product/components/empty-states.html index 7f1aa69243..87bace788c 100644 --- a/packages/stacks-docs/product/components/empty-states.html +++ b/packages/stacks-docs/product/components/empty-states.html @@ -6,6 +6,16 @@ description: Empty states are used when there is no data to show. Ideally they orient the user by providing feedback based on the the user’s last interaction or communicate the benefits of a feature. When appropriate, they should explain the next steps the user should take and provide guidance with a clear call-to-action. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsItems = empty-states.classes %} + {% assign col2Heading = "" %} + {% assign col3Heading = "" %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %} +
+
{% header "h2", "No data or results" %}

diff --git a/packages/stacks-docs/product/components/expandable.html b/packages/stacks-docs/product/components/expandable.html index 4a2e7759ad..e9eb23e314 100644 --- a/packages/stacks-docs/product/components/expandable.html +++ b/packages/stacks-docs/product/components/expandable.html @@ -5,6 +5,16 @@ description: An expandable, sometimes called an accordion, is an element that can be hidden / revealed with a sliding transition. tags: components --- + +

+ {% header "h2", "Classes" %} + {% assign docsItems = expandable.classes %} + {% assign col1Classes = "s-table--cell3" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign col3Classes = "s-table--cell3" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Examples" %} {% header "h3", "Basic" %} diff --git a/packages/stacks-docs/product/components/link-previews.html b/packages/stacks-docs/product/components/link-previews.html index 93c3710497..d8c3d99246 100644 --- a/packages/stacks-docs/product/components/link-previews.html +++ b/packages/stacks-docs/product/components/link-previews.html @@ -6,27 +6,15 @@ ---
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in link-previews.classes %} - - - - - - {% endfor %} - -
ClassParentDescription
{{ item.class }}{{ item.parent }}{{ item.description }}
-
+ {% assign docsItems = link-previews.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell4" %} + {% assign col3Heading = "" %} + {% assign col4Heading = "Description" %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %}

Link previews automatically appear when you pasting a link into a post, providing a glimpse of what’s been linked to. This approach has been popularized by Slack, Twitter, Facebook, etc. Link previews should be tailored to fit the content received from each third party. It might be appropriate to use atomic utility classes for further customization, but Stacks provides a few reusable patterns:

@@ -50,29 +38,27 @@
{% endhighlight %}
+ {% assign baseExample = link-previews.examples.base %}
-
- {% icon "Jira", "native" %} -
+
{% icon "Jira", "native" %}
- Using hooks for a simple fetch request and breaking the rules of hooks, unsure how? + {{ baseExample.title }}
- Issue submitted by Ricky Otero on Aug 12, 2019 • RESOLVED + {{ baseExample.details }}
-

I'm trying to create a simple fetch with hooks from an AWS database. At the moment it errors out and the only reason I can see is because it breaks the rules of hooks but I'm not sure how. It's at the top level of this functional component and it's not called inside an event handler.

-

The result of this call (an array of user data), needs to be exported as a function and called in another file.

-

If anyone can spot something I have missed and can highlighted how I'm breaking the rules of hooks I'd be grateful!

-

Thanks!

+ {% for item in baseExample.body %} +

{{ item }}

+ {% endfor %}
- https://stackoverflow.atlassian.net/projects/SREREQ/queues/custom/1 - Privacy notice + {{ baseExample.url }} + {{ baseExample.misc }}
@@ -103,17 +89,18 @@
{% endhighlight %}
+ {% assign codeExample = link-previews.examples.code %}
{% icon "GitHub" %}
@@ -139,8 +126,8 @@ {% endhighlight %}
- https://github.com/StackExchange/Stacks/blob/develop/Gruntfile.js -
(truncated)
+ {{ codeExample.url }} +
{{ codeExample.misc }}
@@ -196,11 +183,11 @@ {% icon "GitHub" %}
- - Gruntfile.js + + {{ codeExample.title }}
- Located in StackExchange / Stacks + {{ codeExample.details }}
@@ -226,8 +213,8 @@ {% endhighlight %}
- https://github.com/StackExchange/Stacks/blob/develop/Gruntfile.js -
(truncated)
+ {{ codeExample.url }} +
{{ codeExample.misc }}
diff --git a/packages/stacks-docs/product/components/links.html b/packages/stacks-docs/product/components/links.html index 2a541fa751..e619dae754 100644 --- a/packages/stacks-docs/product/components/links.html +++ b/packages/stacks-docs/product/components/links.html @@ -5,30 +5,15 @@ description: Links are lightly styled via the a element by default. In addition, we provide .s-link and its variations. In rare situations, .s-link can be applied to n button while maintaining the look of an anchor. tags: components --- + +{% header "h2", "Links" %}
- {% header "h2", "Single link" %} - {% header "h3", "Single link classes" %} -
- - - - - - - - - - {% for item in links.single-links %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% header "h3", "Link classes" %} + {% assign docsItems = links.link-classes %} + {% assign col2Heading = "" %} + {% include "docs-table.html" %}
+
{% header "h3", "Single link examples" %}
@@ -60,30 +45,18 @@

Any link with adjacent static text cannot use color alone to differentiate it as a link. If a link is next to static text and the only visual indication that it’s a link is the color of the text, it will require an underline in addition to the color. Reference WCAG SC 1.4.1 for more details.

+{% header "h2", "Anchors" %}
- {% header "h2", "Descendent anchors" %} - {% header "h3", "Descendent anchor classes" %} -
- - - - - - - - - - {% for item in links.descendent-anchors %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
- {% header "h3", "Descendent anchor examples" %} + {% header "h3", "Anchor classes" %} + {% assign docsItems = links.anchors-classes %} + {% assign col1Classes = "s-table--cell3" %} + {% assign col3Classes = "s-table--cell2" %} + {% assign col2Heading = "" %} + {% include "docs-table.html" %} +
+ +
+ {% header "h3", "Anchor examples" %}

Sometimes you need to give all <a> elements inside a container or component the same color, even when it‘s impractical or even impossible to give each anchor element an s-link class (e.g. because the markup is generated from Markdown).

In this case, you can add the s-anchors class together with one of the modifiers @@ -101,7 +74,7 @@

…
{% endhighlight %}
- {% for item in links.descendent-anchors %} + {% for item in links.anchors-classes %} {% if item.name != "base" %}
There is a {{ item.name }} link here, , and another one. diff --git a/packages/stacks-docs/product/components/loader.html b/packages/stacks-docs/product/components/loader.html index 2b0db11d9e..55add7716d 100644 --- a/packages/stacks-docs/product/components/loader.html +++ b/packages/stacks-docs/product/components/loader.html @@ -8,34 +8,8 @@
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in loader.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
- {{ item.class }} - - {% if item.applies == "N/A" %} - {{ item.applies }} - {% else %} - {{ item.applies }} - {% endif %} - {{ item.description }}
-
+ {% assign docsItems = loader.classes %} + {% include "docs-table.html" %}
{% header "h2", "Examples" %} {% header "h3", "Base" %} @@ -60,38 +34,9 @@
{% header "h3", "Sizes" %} - - - - - - - - - - {% for size in loader.sizes %} - - - - - - {% endfor %} - -
ClassApplied toExample
- {% if size == "" %} - .s-loader - {% else %} - .{{ size }} - {%endif %} - - {% if size == "" %} - N/A - {% else %} - .s-loader - {% endif %} - -
-
Loading…
-
-
+ {% assign docsItems = loader.sizes-classes %} + {% assign col3Classes = "s-table--cell3" %} + {% assign col2Heading = "" %} + {% assign col4Heading = "Example" %} + {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/menus.html b/packages/stacks-docs/product/components/menus.html index 57c5570218..3014ae9cc4 100644 --- a/packages/stacks-docs/product/components/menus.html +++ b/packages/stacks-docs/product/components/menus.html @@ -8,37 +8,19 @@ ---
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in menu.classes %} - - - - - - {% endfor %} - -
ClassParentDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = menus.classes %} + {% assign col2Classes = "s-table--cell3" %} + {% assign col3Classes = "s-table--cell3" %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %} -

- A menu displays a list of choices temporarily, and usually represent tasks or actions. Don’t confuse menus for navigation. -

+

A menu displays a list of choices temporarily, and usually represent tasks or actions. Don’t confuse menus for navigation.

{% header "h3", "Basic" %} -

- At its most basic, a menu is a simple styled list of contextual actions. Because they’re contextual, it’s strongly recommended that a menu is contained within a popover or a card. When placed in various containers, you’ll need to either account for the padding on the container, or use negative margins on the menu component itself. -

+

At its most basic, a menu is a simple styled list of contextual actions. Because they’re contextual, it’s strongly recommended that a menu is contained within a popover or a card. When placed in various containers, you’ll need to either account for the padding on the container, or use negative margins on the menu component itself.

+
{% highlight html %}
diff --git a/packages/stacks-docs/product/components/modals.html b/packages/stacks-docs/product/components/modals.html index 182e70cca5..588417f618 100644 --- a/packages/stacks-docs/product/components/modals.html +++ b/packages/stacks-docs/product/components/modals.html @@ -9,27 +9,11 @@ ---
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in modals.classes %} - - - - - - {% endfor %} - -
ClassApplies toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = modals.classes %} + {% include "docs-table.html" %} +
+
{% header "h2", "JavaScript" %} {% header "h3", "Attributes" %}
diff --git a/packages/stacks-docs/product/components/navigation.html b/packages/stacks-docs/product/components/navigation.html index e0afc170af..03ca2a5066 100644 --- a/packages/stacks-docs/product/components/navigation.html +++ b/packages/stacks-docs/product/components/navigation.html @@ -9,26 +9,9 @@ ---
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in navigation.classes %} - - - - - - {% endfor %} - -
ClassApplies toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = navigation.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% include "docs-table.html" %} {% for item in navigation.navigation-attributes %} {% header "h3", item.title %} diff --git a/packages/stacks-docs/product/components/notices.html b/packages/stacks-docs/product/components/notices.html index 08a616f89a..f7a05e6ef8 100644 --- a/packages/stacks-docs/product/components/notices.html +++ b/packages/stacks-docs/product/components/notices.html @@ -7,234 +7,30 @@ tags: components --- - - - -
- {% header "h2", "Accessibility" %} -
- - - - - - - - - - {% for item in notices.access %} - - - - - - {% endfor %} - -
ItemApplied toDescription
{{ item.item }} - {% if item.applies == "N/A" %} - {{ item.applies }} - {% else %} - {% assign class = item.applies | split: " " %} - - {% for name in class %} - {{ name }} - {% endfor %} - {% endif %} - {{ item.description }} (Source)
-
+ {% header "h2", "Classes" %} + {% assign docsItems = notices.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %}
- {% header "h2", "JavaScript" %} - {% header "h3", "Attributes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeApplied toDescription
data-controller="s-toast"Controller elementWires up the element to the toast controller. This may be a .s-toast element or a wrapper element.
data-s-toast-target="toast".s-toast elementWires up the element that is to be shown/hidden
data-s-toast-target="initialFocus"Any child focusable elementOptional Designates which element to focus on toast show. If absent, defaults to the first focusable element within the toast.
data-action="s-toast#toggle"Toggling elementWires up the element to toggle the visibility of a toast
data-s-toast-return-element="[css selector]"Controller elementOptional Designates the element to return focus to when the toast is closed. If left unset, focus is not altered on close.
data-s-toast-remove-when-hidden="true"Controller elementOptional Removes the toast from the DOM entirely when it is hidden
-
- {% header "h3", "Events" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EventElementDescription
s-toast:showToast targetDefault preventable Fires immediately before showing the toast. Calling .preventDefault() cancels the display of the toast.
s-toast:shownToast targetFires after the toast has been visually shown
s-toast:hideToast targetDefault preventable Fires immediately before hiding the toast. Calling .preventDefault() cancels the removal of the toast.
s-toast:hiddenToast targetFires after the toast has been visually hidden
-
-
- - - - - - - - - - - - - - - - - - - - - - -
event.detailApplicable eventsDescription
dispatchers-toast:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the toast that caused it to hide, etc.
returnElements-toast:show, s-toast:hideContains the Element to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well.
-
- {% header "h3", "Helpers" %} -
- - - - - - - - - - - - - - - - - - - - -
FunctionParametersDescription
Stacks.showToast - element: the element the data-controller="s-toast" attribute is on

- 		Helper to manually show an s-toast element via external JS
Stacks.hideToast - element: the element the data-controller="s-toast" attribute is on

- 		Helper to manually hide an s-toast element via external JS
-
+ {% header "h2", "Accessibility" %} + {% assign tableId = "docs-accessibility-table" %} + {% assign docsItems = notices.accessibility %} + {% assign expandableClassesTable = true %} + {% assign col1Heading = "Item" %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Heading = "" %} + {% assign expandableBtnText = "Show all accessibility items" %} + {% include "docs-table.html" %}
- {% header "h2", "Visual styles" %} - {% header "h3", "Classes" %} -
- - - - - - - - - - {% for item in notices.visual %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }} - {% if item.applies == "N/A" %} - {{ item.applies }} - {% else %} - {% assign class = item.applies | split: " " %} - - {% for name in class %} - {{ name }} - {% endfor %} - {% endif %} - {{ item.description }}
-
- + {% header "h2", "Examples" %} {% header "h3", "Base" %} -

Default notice variations

{% highlight html %}
@@ -245,7 +41,7 @@ @Svg.Info …
-
+
@Svg.Check … …
@@ -298,7 +94,7 @@ @Svg.Info …
-
- {% header "h3", "Styling child links" %} + {% header "h3", "Styling child links" %}

We recommend using descendent anchor classes, typically .s-anchors.s-anchors__inherit.s-anchors__underlined for notices containing links generated from markdown when you cannot manually generate the inner html.

{% highlight html %} @@ -352,12 +148,10 @@ {% endhighlight %}
- -
- {% header "h2", "Behaviors" %} -
- - - - - - - - - - - {% for item in notices.behavior %} - - - - - - {% endfor %} - -
BehaviorClassApplied toDescription
{{ item.type }} - {{ item.class }} - {% if item.applies == "N/A" %} - {{ item.applies }} - {% else %} - {% assign class = item.applies | split: " " %} + {% header "h2", "Toast" %} + {% tip "warning" %} + We are phasing out Toasts due to significant accessibility barriers. Avoid this component for new features. Instead, prioritize integrated alternatives—such as component state changes or inline messages—to provide accessible feedback directly where the user is focused. + {% endtip %} - {% for name in class %} - {{ name }} - {% endfor %} - {% endif %} - {{ item.description }}
-
- - {% header "h3", "Toast" %}

- Floating notices, but aligned to the top and center of the page and they disappear after a set time. + Toasts are floating notices that are aligned to the center top of the page. They disappear after a set time. Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false". When including a dismiss button the .s-notice--dismiss class should be applied to the button for toast-specific styling. -

- -
-
- -
-
- -
- {% icon "Alert" %} - Usage Warning: We are phasing out Toasts due to significant accessibility barriers. Avoid this component for new features. Instead, prioritize integrated alternatives—such as component state changes or inline messages—to provide accessible feedback directly where the user is focused. -
+

{% highlight html %} @@ -465,5 +218,73 @@ {% endfor %}
+
+ +
+ +
+ + {% header "h3", "JavaScript" %} + + {% header "h4", "Attributes" %} + {% assign docsItems = notices.javascript.attributes %} + {% assign col1Heading = "Attribute" %} + {% assign col1Classes = "s-table--cell5" %} + {% assign col2Heading = "" %} + {% assign tableId = "docs-javascript-attributes-table" %} +
+ {% include "docs-table.html" %} +
+ + {% header "h4", "Events" %} + {% assign docsItems = notices.javascript.events %} + {% assign col1Heading = "Event" %} + {% assign col2Heading = "" %} + {% assign tableId = "docs-javascript-events-table" %} +
+ {% include "docs-table.html" %} +
+ + {% header "h4", "Event details" %} + {% assign docsItems = notices.javascript.eventDetails %} + {% assign col1Heading = "event.detail" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Applicable events" %} + {% assign tableId = "docs-javascript-event-details-table" %} +
+ {% include "docs-table.html" %}
+ + {% header "h4", "Helpers" "mt48" %} +

+ The following helpers are available to manually show and hide a toast notice. +

+ {% assign docsItems = notices.javascript.helpers %} + {% assign col1Heading = "Function" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Parameters" %} + {% assign tableId = "docs-javascript-helpers-table" %} + {% include "docs-table.html" %}
+ + + + + \ No newline at end of file diff --git a/packages/stacks-docs/product/components/page-titles.html b/packages/stacks-docs/product/components/page-titles.html index c1ff2c9307..8123de2148 100644 --- a/packages/stacks-docs/product/components/page-titles.html +++ b/packages/stacks-docs/product/components/page-titles.html @@ -6,43 +6,20 @@ ---
- {% header "h2", "Components" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - -
ComponentDescription
Page titleTitle of the page. Refer to the content section of Stacks for things like word choice, naming, and capitalization.
Description OptionalAdditional context for content and actions on the page.
Actions OptionalFree-form area to include buttons, filters, or other HTML content.
Breadcrumbs OptionalBreadcrumbs can be included to provide context for the currently-viewed page.
-
- {% header "h2", "Admin sections" %} -

- These components should be used in the admin sections of our private Q&A products. -

- {% header "h3", "Base Styles" %} -

- The base style for pages that don’t need further description beyond the page title and don’t have any actions for filters. -

+ {% header "h2", "Classes" %} + {% assign docsItems = page-titles.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign col3Heading = "" %} + {% include "docs-table.html" %} +
+ +
+ {% header "h2", "Examples" %} + {% header "h3", "Base example" %} +

The base style for pages that don’t need further description beyond the page title and don’t have any actions for filters.

+ {% assign example = page-titles.example %} +
{% highlight html %}
@@ -51,14 +28,13 @@

Page title

{% endhighlight %}
-

Page title

+

{{ example.title }}

+ {% header "h3", "Title with description" %} -

- A summary of a page’s content. Helpful for large pages with multiple actions. -

+

A summary of a page’s content. Helpful for large pages with multiple actions.

{% highlight html %}
@@ -71,16 +47,15 @@

Page title

-

Page title

-

Optional description de Finibus Bonorum et Malorum with an optional link.

+

{{ example.title }}

+

{{ example.description }}

+ {% header "h3", "Title with actions" %} -

- When a page title includes actions, they are located at the far end of the component. This area is free-form, so we can include any markups we'd like, from single button to a d-flex of custom filters and text. -

+

When a page title includes actions, they are located at the far end of the component. This area is free-form, so we can include any markups we'd like, from single button to a d-flex of custom filters and text.

{% highlight html %}
@@ -94,8 +69,8 @@

Page title

-

Page title

-

Optional description de Finibus Bonorum et Malorum with an optional link.

+

{{ example.title }}

+

{{ example.description }}

@@ -106,10 +81,9 @@

Page title

+ {% header "h3", "Title with breadcrumbs" %} -

- Breadcrumbs are used to provide context for the currently-viewed page and reduce the number of actions a website visitor needs to take in order to get to a higher-level page. Breadcrumbs should not be used for single-level sections that have no logical grouping. -

+

Breadcrumbs are used to provide context for the currently-viewed page and reduce the number of actions a website visitor needs to take in order to get to a higher-level page. Breadcrumbs should not be used for single-level sections that have no logical grouping.

{% highlight html %}
@@ -136,7 +110,7 @@

Page title

…
-

Page title

+

{{ example.title }}

Optional description de Finibus Bonorum et Malorum with an optional link.

diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html index 2b964278b0..5eee2feeac 100644 --- a/packages/stacks-docs/product/components/pagination.html +++ b/packages/stacks-docs/product/components/pagination.html @@ -6,35 +6,26 @@ description: Pagination splits content into pages, as seen on questions, tags, users, and jobs listings. tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in pagination-component.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = pagination-component.classes %} + {% assign col3Classes = "s-table--cell3" %} + {% include "docs-table.html" %}
+
{% header "h2", "Example" %}
{% highlight html %}
+
- {% header "h2", "Hover tooltips" %} + {% header "h2", "Tooltips" %}

When a popover is intended only for display as an on-hover tooltip and contains no interactive text, the s-tooltip controller can be used in place of s-popover. This is a separate controller that can be used alongside s-popover on a single target element.

- {% header "h3", "Hover attributes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeApplied toDescription
id="{POPOVER_ID}".s-popoverA unique id that the popover’s toggling element can target. Matches the value of [aria-describedby] on the toggling element.
data-controller="s-tooltip"Controller elementWires up the element to the tooltip controller.
data-s-tooltip-reference-selector="[css selector]"Controller elementOptional Designates the element to use as the tooltip reference. If left unset, the value defaults to the controller element.
aria-describedby="{POPOVER_ID}"Reference elementAssociates the element to the desired popover element.
title="{TITLE}"Controller elementIf aria-describedby is not present or valid, and the title attribute exists, the title will be removed from the element and be used to create a popover immediately after the element. All content will be escaped and inserted as text.
data-s-tooltip-html-title="{TITLE}"Controller elementActs the exact same as the title attribute, but inserts the raw text directly as html. If both this and the title attribute exist on the element, this attribute will be used.
data-s-tooltip-placement="[placement]"Controller elementDictates where to place the popover in relation to the reference element. By default, the placement value is bottom. Accepted placements are auto, top, right, bottom, left. Each placement can take an additional -start and -end variation.
-
- {% header "h3", "Hover events" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EventElementDescription
s-tooltip:showController elementDefault preventable Fires immediately before showing and positioning the tooltip. This fires before the tooltip is first displayed to the user, and can be used to create or initialize the tooltip element. Calling .preventDefault() cancels the display of the popover.
s-tooltip:shownController elementFires immediately after showing the tooltip.
s-tooltip:hideController elementDefault preventable Fires immediately before hiding the tooltip. Calling .preventDefault() prevents the removal of the tooltip.
s-tooltip:hiddenController elementFires immediately after hiding the tooltip.
-
-
- - - - - - - - - - - - - - - -
event.detailApplicable eventsDescription
dispatchers-tooltip:*Contains the Element that initiated the event. For instance, the element hovered over to show, etc.
-
- {% header "h3", "Hover examples" %} +
+ {% header "h3", "Tooltip hover attributes" %} + {% assign tableId = "popovers-tooltip-hover-attributes-table" %} + {% assign docsItems = popovers.tooltipHoverAttributes %} + {% assign col1Heading = "Attribute" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Applied to" %} + {% assign expandableClassesTable = true %} + {% assign expandableBtnText = "Show all tooltip hover attributes" %} + {% include "docs-table.html" %} +
+ +
+ {% header "h3", "Tooltip hover events" %} + {% assign tableId = "popovers-tooltip-hover-events-table" %} + {% assign docsItems = popovers.tooltipHoverEvents %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col1Heading = "Event" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Element" %} + {% assign expandableClassesTable = true %} + {% assign expandableBtnText = "Show all tooltip hover events" %} + {% include "docs-table.html" %} +
+ +
+ {% header "h3", "Tooltip dispatched events" %} + {% assign tableId = "popovers-tooltip-dispatched-events-table" %} + {% assign docsItems = popovers.tooltipDispatchedEvents %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col1Heading = "Event" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Element" %} + {% include "docs-table.html" %} +
+
+ +
+ {% header "h2", "Tooltip examples" %}

If the user doesn’t need to interact with the contents of the popover, it may be appropriate to only show it on hover. This will make popovers feel like a tooltip. To do so, we provide an alternative controller, s-tooltip, that shows the tooltip only on hover.

- {% header "h4", "Title attribute" %} -

In the simple case where no markup is needed in the tooltip, the popover element can be omitted and automatically generated using the title attribute.

+
+ {% header "h3", "Title attribute" %} +

In the simple case where no markup is needed in the tooltip, the popover element can be omitted and automatically generated using the title attribute.

-
+
{% highlight html %} {% endhighlight %} -
- +
+ +
-
+
- {% header "h4", "JavaScript configuration (tooltips)" %} -

In cases where the tooltip needs to display simple text or HTML, the popover can be configured using JavaScript. Plain text tooltips will render characters like <, >, and & as is. HTML tooltips will render the HTML as expected.

-
+
+ {% header "h3", "JavaScript configuration (tooltips)" %} +

In cases where the tooltip needs to display simple text or HTML, the popover can be configured using JavaScript. Plain text tooltips will render characters like <, >, and & as is. HTML tooltips will render the HTML as expected.

+
{% highlight javascript %} Stacks.setTooltipText(el, "Plain text tooltip", @@ -526,20 +377,22 @@

Lorem ipsum

placement: "top-end" }); {% endhighlight %} -
- - +
+ + +
-
+
- {% header "h4", "Rich tooltips" %} -

When a rich tooltip is required, a popover element can be configured in much the same way as an s-popover controller, with the most notable difference being the use of aria-describedby instead of aria-controls.

+
+ {% header "h3", "Rich tooltips" %} +

When a rich tooltip is required, a popover element can be configured in much the same way as an s-popover controller, with the most notable difference being the use of aria-describedby instead of aria-controls.

-
+
{% highlight html %}
{% endhighlight %} -
- -
- {% header "h4", "Tooltips and interactive popovers" %} -

Hover tooltips can be used alongside interactive popovers. Tooltips will no appear when the interactive popover is visible.

+
+ {% header "h3", "Tooltips and interactive popovers" %} +

Hover tooltips can be used alongside interactive popovers. Tooltips will no appear when the interactive popover is visible.

-
+
{% highlight html %}
{% endhighlight %} -
- -
+
{% header "h2", "Manual placement" %} {% tip, "warning" %} Our Stimulus popover controller handles the positioning of popovers for you. Popovers can be positioned manually for various legacy reasons, but we recommend using the s-popover controller's placement property instead. {% endtip %} - {% header "h3", "Manual examples" %} -

Popovers can also be positioned manually if you aren’t using the built-in JavaScript interactivity. Practically, this might look like adding something like t8 l8 to .s-popover.

-

By default, popovers are hidden and positioned absolutely. Adding the class .is-visible will show the popover.

-
+
+ {% header "h3", "Manual examples" %} +

Popovers can also be positioned manually if you aren’t using the built-in JavaScript interactivity. Practically, this might look like adding something like t8 l8 to .s-popover.

+

By default, popovers are hidden and positioned absolutely. Adding the class .is-visible will show the popover.

+ +
{% highlight html %}
@@ -649,14 +508,15 @@

Lorem ipsum

{% endhighlight %} -
-
-
-

Example popover with manual placement

+
+
+
+

Example popover with manual placement

+
-
+
diff --git a/packages/stacks-docs/product/components/post-summary.html b/packages/stacks-docs/product/components/post-summary.html index ed021a30ee..e6f38c2769 100644 --- a/packages/stacks-docs/product/components/post-summary.html +++ b/packages/stacks-docs/product/components/post-summary.html @@ -8,33 +8,22 @@
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in post-summary.classes %} - - - - - - {% endfor %} - -
ClassParentDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign tableId = "post-summary-classes-table" %} + {% assign docsItems = post-summary.classes %} + {% assign col2Classes = "s-table--cell3" %} + {% assign col3Classes = "s-table--cell3" %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %}
-{% header "h2", "Examples" %} -{% header "h3", "Base" %}
-

Use the post summary component to provide a concise summary of a question, article, or other content.

-
+ {% header "h2", "Examples" %} + +
+ {% header "h3", "Base" %} + +

Use the post summary component to provide a concise summary of a question, article, or other content.

+
{% highlight html %}
@@ -89,33 +78,35 @@
{% endhighlight %} -
- {% render 'post-summary-item.html' %} -
-
+
+ {% render 'post-summary-item.html' %} +
+
-{% header "h3", "Answered" %} -
-

- Add the .s-post-summary__answered modifier class to indicate that the post has an accepted answer. -

-
+
+ {% header "h3", "Answered" %} + +

+ Add the .s-post-summary__answered modifier class to indicate that the post has an accepted answer. +

+
{% highlight html %}
…
{% endhighlight %} -
- {% render 'post-summary-item.html', data: post-summary.answered %} -
-
+
+ {% render 'post-summary-item.html', data: post-summary.answered %} +
+
-
- {% header "h3", "Bountied" %} -

- Include the .s-post-summary--stats-bounty element to indicate that the post has a bounty. -

-
+
+ {% header "h3", "Bountied" %} + +

+ Include the .s-post-summary--stats-bounty element to indicate that the post has a bounty. +

+
{% highlight html %}
@@ -142,15 +133,16 @@ …
{% endhighlight %} -
- {% render 'post-summary-item.html', data: post-summary.bountied %} -
-
+
+ {% render 'post-summary-item.html', data: post-summary.bountied %} +
+
-{% header "h3", "Ignored" %} -
-

Including an ignored tag will automatically apply custom ignored styling to the post summary.

-
+
+ {% header "h3", "Ignored" %} + +

Including an ignored tag will automatically apply custom ignored styling to the post summary.

+
{% highlight html %}
… @@ -163,18 +155,19 @@
{% endhighlight %} -
- {% render 'post-summary-item.html', - data: post-summary.ignored - %} +
+ {% render 'post-summary-item.html', + data: post-summary.ignored + %} +
-
-
+
-{% header "h3", "Watched" %} -
-

Including a watched tag will automatically apply custom watched styling to the post summary.

-
+
+ {% header "h3", "Watched" %} + +

Including a watched tag will automatically apply custom watched styling to the post summary.

+
{% highlight html %}
… @@ -187,35 +180,37 @@
{% endhighlight %} -
- {% render 'post-summary-item.html', - data: post-summary.watched - %} +
+ {% render 'post-summary-item.html', + data: post-summary.watched + %} +
-
-
+
-{% header "h3", "Deleted" %} -
-

Include the .s-post-summary__deleted modifier class applies custom deleted styling to the post summary.

-
+
+ {% header "h3", "Deleted" %} + +

Include the .s-post-summary__deleted modifier class applies custom deleted styling to the post summary.

+
{% highlight html %}
…
{% endhighlight %} -
- {% render 'post-summary-item.html', - data: post-summary.deleted - %} +
+ {% render 'post-summary-item.html', + data: post-summary.deleted + %} +
-
-
+
-{% header "h3", "State badges" %} -
-

Include the appropriate state badge to indicate the current state of the post.

-
+
+ {% header "h3", "State badges" %} + +

Include the appropriate state badge to indicate the current state of the post.

+
{% highlight html %}
@@ -322,20 +317,20 @@
{% endhighlight %} -
- {% for data in post-summary.states %} - {% render 'post-summary-item.html', - data: data - %} - {% endfor %} +
+ {% for data in post-summary.states %} + {% render 'post-summary-item.html', + data: data + %} + {% endfor %} +
-
-
+
-{% header "h3", "Content types" %} -
-

Include the appropriate content type badge to indicate the type of content the post represents.

-
+
+ {% header "h3", "Content types" %} +

Include the appropriate content type badge to indicate the type of content the post represents.

+
{% highlight html %}
@@ -389,42 +384,43 @@
{% endhighlight %} -
- {% for data in post-summary.contentTypes %} - {% render 'post-summary-item.html', data: data %} - {% endfor %} +
+ {% for data in post-summary.contentTypes %} + {% render 'post-summary-item.html', data: data %} + {% endfor %} +
-
-
+
- -{% header "h3", "Excerpt sizes" %} -
- {% header "h4", "Classes" %} -

Post summaries can be shown without an excerpt or with an excerpt with one, two, or three lines of text. Exclude the excerpt container to hide the excerpt or apply the appropriate truncation class to the excerpt container. See also Truncation.

-
- - - - - - - - - {% for item in post-summary.excerptSizes %} - {% if item.excerptLines > 0 %} +
+ {% header "h3", "Excerpt sizes" %} + + {% header "h4", "Classes" %} +

Post summaries can be shown without an excerpt or with an excerpt with one, two, or three lines of text. Exclude the excerpt container to hide the excerpt or apply the appropriate truncation class to the excerpt container. See also Truncation.

+ +
+
ClassDescription
+ - - - - {% endif %} - {% endfor %} - -
.v-truncate{{ item.excerptLines }}Truncates the excerpt to {{ item.excerptLines }} lines of text.
-
+ Class + Description + + + + {% for item in post-summary.excerptSizes %} + {% if item.excerptLines > 0 %} + + .v-truncate{{ item.excerptLines }} + Truncates the excerpt to {{ item.excerptLines }} lines of text. + + {% endif %} + {% endfor %} + + + - {% header "h4", "Examples" %} -
+ {% header "h4", "Examples" %} +
{% highlight html %}
@@ -462,39 +458,39 @@
{% endhighlight %} -
- {% for data in post-summary.excerptSizes %} - {% render 'post-summary-item.html', - data: data - %} - {% endfor %} +
+ {% for data in post-summary.excerptSizes %} + {% render 'post-summary-item.html', + data: data + %} + {% endfor %} +
-
-
+ -{% header "h3", "Small container" %} -
-

Post summaries adapt to their container size. When shown with a container smaller than 448px, the post summary renders with a compact layout.

-
+
+ {% header "h3", "Small container" %} + +

Post summaries adapt to their container size. When shown with a container smaller than 448px, the post summary renders with a compact layout.

+
{% highlight html %}
…
{% endhighlight %} -
-
- {% for data in post-summary.small %} - {% render 'post-summary-item.html', data: data %} - {% endfor %} +
+
+ {% for data in post-summary.small %} + {% render 'post-summary-item.html', data: data %} + {% endfor %} +
-
-
+
- -{% header "h3", "Answers" %} -
- -

Answers to a question can be shown in a post summary. Include the .s-post-summary--answers container to show the answers.

-

For accepted answers, add the .s-post-summary--answer__accepted modifier class and display the Accepted answer text and icon as shown in the example below.

-
+
+ {% header "h3", "Answers" %} + +

Answers to a question can be shown in a post summary. Include the .s-post-summary--answers container to show the answers.

+

For accepted answers, add the .s-post-summary--answer__accepted modifier class and display the Accepted answer text and icon as shown in the example below.

+
{% highlight html %}
…
@@ -578,10 +574,11 @@
{% endhighlight %} -
- {% for data in post-summary.withAnswers %} - {% render 'post-summary-item.html', data: data %} - {% endfor %} +
+ {% for data in post-summary.withAnswers %} + {% render 'post-summary-item.html', data: data %} + {% endfor %} +
-
+
diff --git a/packages/stacks-docs/product/components/progress-bars.html b/packages/stacks-docs/product/components/progress-bars.html index fab134d9e9..bad0506754 100644 --- a/packages/stacks-docs/product/components/progress-bars.html +++ b/packages/stacks-docs/product/components/progress-bars.html @@ -5,133 +5,27 @@ tags: components ---
- {% header "h2", "Classes and parameters" %} -

These are the various classes and parameters used within progress bars.

+ {% header "h2", "Classes" %} + {% assign tableId = "progress-bars-classes-table" %} + {% assign docsItems = progress-bars.classes %} + {% assign col1Classes = "s-table--cell3" %} + {% assign expandableClassesTable = false %} + {% include "docs-table.html" %} +
- {% header "h3", "Classes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassesDescription
.s-progressThe parent class for all progress bars.
.s-progress--barA child element of .s-progress. It shows the user’s current progress to accomplishing a goal with a background color.
.s-progress--labelA child element of .s-progress. It’s used to describe what progress bar is tracking.
.s-progress__brandA modifying class applied to .s-progress, it changes the bar color from green to orange.
.s-progress__infoA modifying class applied to .s-progress, it changes the bar color from green to blue.
.s-progress__circularA modifying class applied to .s-progress, it changes the bar to be a percentage of a circle.
.s-progress__privilegeA modifying class applied to .s-progress, it changes the bar color from green to a lighter green (for legibility reasons).
.s-progress__badgeA modifying class applied to .s-progress, it is applied when a badge progress bar is desired.
.s-progress__goldA modifying class applied to .s-progress__badge, it is used when a gold badge progress bar is desired.
.s-progress__silverA modifying class applied to .s-progress__badge, it is used when a silver badge progress bar is desired.
.s-progress__bronzeA modifying class applied to .s-progress__badge, it is used when a bronze badge progress bar is desired.
.s-progress__segmentedA modifying class applied to .s-progress for a segmented progress bar
.s-progress__steppedA modifying class applied to .s-progress for a stepped progress bar
.s-progress--stepA child of .s-progress__stepped that’s a wrapper for each individual step
.is-activeA modifier .s-progress__step that adds visual styling to the active step.
.is-completedA modifier .s-progress__step that adds visual styling to a completed step.
.s-progress--stopA child of .s-progress__step, the circle that might contain a checkmark if the step’s been completed.
.s-progress--bar__leftA modifier of .s-progress__bar that draws a line on the left side of a step.
.s-progress--bar__rightA modifier of .s-progress__bar that draws a line on the right side of a step.
-
- {% header "h3", "Parameters" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterDescription
role="progressbar"Applied to .s-progress--bar, this parameter communicates that element is displaying progress status that takes a long time or consists of several steps. (Source)
aria-valueminApplied to .s-progress--bar, this parameter defines the minimum allowed value for the progress bar. (Source)
aria-valuemaxApplied to .s-progress--bar, this parameter defines the maximum allowed value for the progress bar. (Source)
aria-valuenowApplied to .s-progress--bar, this parameter defines the current value for the progress bar. (Source)
style="width: [value]%"Applied to .s-progress--bar, this is the aria-valuenow value displayed as a percentage.
-
+
+ {% header "h2", "Parameters" %} + {% assign tableId = "progress-bars-parameters-table" %} + {% assign docsItems = progress-bars.parameters %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Heading = "" %} + {% assign col3Classes = "s-table--cell3" %} + {% assign col1Heading = "Parameter" %} + {% assign col3Heading = "Applies to" %} + {% include "docs-table.html" %}
+
{% header "h2", "Base style" %}

Since most progress bars are used to show successful completion of a task, the default fill color is green.

diff --git a/packages/stacks-docs/product/components/prose.html b/packages/stacks-docs/product/components/prose.html index 56e50cb520..6dffe26cf5 100644 --- a/packages/stacks-docs/product/components/prose.html +++ b/packages/stacks-docs/product/components/prose.html @@ -8,26 +8,12 @@ {% assign expandBtnContainerClasses = "ps-sticky bg-white z-popover py16 t64 bb bc-black-200 sm:py8" %}
- {% header "h2", "Classes" %} -
- - - - - - - - - {% for item in components.prose.classes %} - - - - - {% endfor %} - -
ClassOutput
{{ item.class }}{{ item.description }}
-
+ {% header "h2", "Parameters" %} + {% assign docsItems = prose.classes %} + {% assign col2Heading = "" %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %} {% header "h3", "Minimal" %} diff --git a/packages/stacks-docs/product/components/radio.html b/packages/stacks-docs/product/components/radio.html index 95660c01b4..f0f9862e30 100644 --- a/packages/stacks-docs/product/components/radio.html +++ b/packages/stacks-docs/product/components/radio.html @@ -6,8 +6,16 @@ description: Checkable inputs that visually allow for single selection from multiple options. tags: components --- +
+ {% header "h2", "Classes" %} + {% assign docsItems = checkbox_radio.radio-classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Heading = "" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Base" %}

Use the .s-radio to wrap input[type="radio"] elements to apply radio styles.

diff --git a/packages/stacks-docs/product/components/select.html b/packages/stacks-docs/product/components/select.html index 61c24dabba..c9752bd821 100644 --- a/packages/stacks-docs/product/components/select.html +++ b/packages/stacks-docs/product/components/select.html @@ -6,6 +6,16 @@ description: A selectable menu list from which a user can make a single selection. Typically they are used when there are more than four possible options. The custom select menu styling is achieved by wrapping the select tag within the .s-select class. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsItems = select.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col3Classes = "s-table--cell3" %} + {% assign col2Heading = "" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Base style" %}
diff --git a/packages/stacks-docs/product/components/sidebar-widgets.html b/packages/stacks-docs/product/components/sidebar-widgets.html index a230af1516..30d1f9d4c0 100644 --- a/packages/stacks-docs/product/components/sidebar-widgets.html +++ b/packages/stacks-docs/product/components/sidebar-widgets.html @@ -5,6 +5,15 @@ tags: components --- +
+ {% header "h2", "Classes" %} + {% assign docsItems = sidebar-widgets.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign col3Heading = "" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Basic style" %} diff --git a/packages/stacks-docs/product/components/tables.html b/packages/stacks-docs/product/components/tables.html index 4772a6d85b..30f682ca3f 100644 --- a/packages/stacks-docs/product/components/tables.html +++ b/packages/stacks-docs/product/components/tables.html @@ -6,6 +6,13 @@ tags: components --- +
+ {% header "h2", "Classes" %} + {% assign docsItems = tables.classes %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Default style" %}

Tables should be wrapped in a container, .s-table-container. This provides horizontal scrolling when necessary in the smallest breakpoints. The default table style is a bordered cell layout with a stylized header row.

@@ -733,26 +740,10 @@

If the table contains rows that should not be sorted, but rather always be at the top or always be at the bottom, add data-s-table-sort-to="top" or data-s-table-sort-to="bottom" to the <tr> element.

{% header "h3", "JavaScript data attributes" %} -
- - - - - - - - - - {% for item in tables.data-attributes %} - - - - - - {% endfor %} - -
AttributeApplied toDescription
{{ item.attribute }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = tables.data-attributes %} + {% assign col1Classes = "s-table--cell5" %} + {% assign col2Classes = "s-table--cell2" %} + {% include "docs-table.html" %} {% header "h3", "JavaScript example" %}
diff --git a/packages/stacks-docs/product/components/tags.html b/packages/stacks-docs/product/components/tags.html index ec3ec454bf..add85e2bf1 100644 --- a/packages/stacks-docs/product/components/tags.html +++ b/packages/stacks-docs/product/components/tags.html @@ -6,28 +6,14 @@ description: Tags are an interactive, community-generated keyword that allow communities to label, organize, and discover related content. Tags are maintained by their respective communities tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in tags-component.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = tags-component.classes %} + {% include "docs-table.html" %} +
+ +
{% header "h2", "Accessibility" %}

Tags should be focusable and navigable with the keyboard. diff --git a/packages/stacks-docs/product/components/topbar.html b/packages/stacks-docs/product/components/topbar.html index 988d03b67d..49a706625e 100644 --- a/packages/stacks-docs/product/components/topbar.html +++ b/packages/stacks-docs/product/components/topbar.html @@ -7,26 +7,10 @@

{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in topbar %} - - - - - - {% endfor %} - -
ClassApplies toDescription
{{ item.class }}{{ item.applies | default: "N/A" | markdown | newline_to_br }}{{ item.description | markdown }}
-
+ {% assign docsItems = topbar.classes %} + {% assign col2Classes = "s-table--cell3" %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/uploader.html b/packages/stacks-docs/product/components/uploader.html index 59cb1f79f4..f1f614f763 100644 --- a/packages/stacks-docs/product/components/uploader.html +++ b/packages/stacks-docs/product/components/uploader.html @@ -5,90 +5,30 @@ description: The Stacks uploader is a custom-styled file input with added functionality to preview the file or files the user is uploading. tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in uploader-component.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign tableId = "uploader-classes-table" %} + {% assign docsItems = uploader.classes %} + {% assign col2Classes = "s-table--cell3" %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+ +
{% header "h2", "JavaScript" %} + {% header "h3", "Attributes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeApplied toDescription
data-controller="s-uploader"Controller elementWires up the element to the uploader controller. This may be a .s-uploader element or a wrapper element.
data-target="s-uploader.uploader".s-uploaderWires up the element containing input, previews, and reset targets.
data-s-uploader-target="input".s-uploader--inputDesignates the file input element.
data-target="s-uploader.previews".s-uploader--previewsDesignates the element to act as a container to file preview(s).
data-action="input->s-uploader#handleInput"input[type=file] elementWires up the element to provide files for preview on change.
data-action="click->s-uploader#reset"Any child elementWires up the element to reset the uploader to its initial state.
data-s-uploader-show-on-inputAny child elementToggles element visibility. Shows when input has value.
data-s-uploader-hide-on-inputAny child elementToggles element visibility. Hides when input has value.
data-s-uploader-enable-on-inputAny child elementToggles element disabled state. Disables when input has no value.
-
+ {% assign tableId = "uploader-attributes-table" %} + {% assign docsItems = uploader.attributes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col3Classes = "s-table--cell3" %} + {% assign col2Heading = "" %} + {% assign expandableClassesTable = true %} + {% assign expandableBtnText = "Show all attributes" %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %}

Including a file input with the class s-uploader--input within s-uploader will provide the correct styling for an upload section.

diff --git a/packages/stacks-docs/product/components/user-cards.html b/packages/stacks-docs/product/components/user-cards.html index 54758d0ebe..af515a24e4 100644 --- a/packages/stacks-docs/product/components/user-cards.html +++ b/packages/stacks-docs/product/components/user-cards.html @@ -5,29 +5,17 @@ description: User cards are a combination of a user and metadata about the user or post tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in user-card.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign tableId = "user-cards-classes-table" %} + {% assign docsItems = user-cards.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %} {% header "h3", "Default" %} @@ -77,7 +65,7 @@
{% endhighlight %}
- {% for user in user-card.base %} + {% for user in user-cards.base %}
@@ -180,7 +168,7 @@
{% endhighlight %}
- {% for user in user-card.with-badges %} + {% for user in user-cards.with-badges %}
@@ -244,32 +232,12 @@
{% header "h3", "Sizes" %} -
- - - - - - - - - - {% for item in user-card.sizes %} - - - - - - {% endfor %} - -
SizeClassDescription
{{ item.size }} - {% if item.class == "N/A" %} - {{ item.class }} - {% else %} - {{ item.class }} - {% endif %} - {{ item.description }}
-
+ {% assign docsItems = user-cards.sizes %} + {% assign tableId = "user-cards-sizes-table" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Size" %} + {% include "docs-table.html" %} + {% header "h4", "Small" %}
{% highlight html %} @@ -316,7 +284,7 @@
{% endhighlight %}
- {% for user in user-card.small %} + {% for user in user-cards.small %}
@@ -434,7 +402,7 @@
{% endhighlight %}
- {% for user in user-card.large %} + {% for user in user-cards.large %}
@@ -524,7 +492,7 @@ - {% for state in user-card.states %} + {% for state in user-cards.states %} {{ state.name }} {{ state.class }} @@ -576,7 +544,7 @@
{% endhighlight %}
- {% for user in user-card.original-poster %} + {% for user in user-cards.original-poster %}
@@ -685,7 +653,7 @@
{% endhighlight %}
- {% for user in user-card.new-contributor %} + {% for user in user-cards.new-contributor %}
@@ -763,7 +731,7 @@
{% endhighlight %}
- {% for user in user-card.deleted-user %} + {% for user in user-cards.deleted-user %}
{% if user.size == 'small' %} @@ -797,7 +765,7 @@ - {% for bling in user-card.additional-bling %} + {% for bling in user-cards.additional-bling %} {{ bling.name }} {% if bling.class == "N/A" %} @@ -912,7 +880,7 @@
{% endhighlight %}
- {% for user in user-card.recognized-member %} + {% for user in user-cards.recognized-member %}
{% if user.size != 'small' %}
@@ -1070,7 +1038,7 @@
{% endhighlight %}
- {% for user in user-card.awarded %} + {% for user in user-cards.awarded %}
diff --git a/packages/stacks-docs/product/components/vote.html b/packages/stacks-docs/product/components/vote.html index 2ebed43695..f841dca776 100644 --- a/packages/stacks-docs/product/components/vote.html +++ b/packages/stacks-docs/product/components/vote.html @@ -7,29 +7,11 @@ tags: components --- -
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in vote.classes %} - - - - - - {% endfor %} - -
ClassParentDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = vote.classes %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %}