diff --git a/.changeset/beige-boats-taste.md b/.changeset/beige-boats-taste.md new file mode 100644 index 0000000000..78e292c2a9 --- /dev/null +++ b/.changeset/beige-boats-taste.md @@ -0,0 +1,9 @@ +--- +"@stackoverflow/stacks": patch +--- + +feat(banner): update styles for SHINE + +BREAKING CHANGES: +- Banner markup has changed. New markup and icons should be applied. +- `.s-banner--btn` has been replaced with `.s-banner--dismiss` diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md index 84dfd45d2e..5330cb7644 100755 --- a/MIGRATION_GUIDE.md +++ b/MIGRATION_GUIDE.md @@ -41,6 +41,11 @@ - `.s-badge__new` renamed to `.s-badge__featured` - `.s-award-bling` renamed to `.s-bling` (used in some badge templates) +#### Banners + +- Banner markup has changed. New markup and icons should be applied. +- `.s-banner--btn` has been replaced with `.s-banner--dismiss` + #### Bling (previously *Award Bling*) - The Award Bling component has been renamed to Bling. - Bling no longer accepts children elements besides those for screen readers. Please include any visually represented strings (such as counts) as siblings to the bling component. diff --git a/package-lock.json b/package-lock.json index 6f4a4317bc..c081365735 100644 --- a/package-lock.json +++ b/package-lock.json @@ -119,7 +119,6 @@ "integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@11ty/dependency-tree": "^4.0.0", "@11ty/dependency-tree-esm": "^2.0.0", @@ -404,7 +403,6 @@ "integrity": "sha512-h0Un1ieD+HUrzBH6dJXhod3ifSghk5Hw/2Y4/KHBziPlZecrFyE9YOTPU6eOs0V9pYl8gOs86fkr/KN8lUX39A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@keyv/serialize": "^1.1.1" } @@ -767,7 +765,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -791,7 +788,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -1780,15 +1776,13 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.3.0.tgz", "integrity": "sha512-L9X8uHCYU310o99L3/MpJKYxPzXPOS7S0NmBaM7UO/x2Kb2WbmMLSkfvdr1KxRIFYOpbY0Jhn7CfLSUDzL8arQ==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@lezer/highlight": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz", "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==", "license": "MIT", - "peer": true, "dependencies": { "@lezer/common": "^1.3.0" } @@ -3098,7 +3092,6 @@ "integrity": "sha512-TmzrdDHUKtKG7x1CqYuMIHjfXMqS85EwIF3Of/LV+laBtDhKrgioPJW82dIOJ44w1nryH8Yeh1Hdx9O+cPWfVw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ts-dedent": "^2.0.0", "type-fest": "~2.19" @@ -3210,7 +3203,6 @@ "integrity": "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1", "debug": "^4.4.1", @@ -3251,7 +3243,6 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -3529,7 +3520,6 @@ "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "*", "@types/json-schema": "*" @@ -3725,7 +3715,6 @@ "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3924,7 +3913,6 @@ "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.46.2", "@typescript-eslint/types": "8.46.2", @@ -4916,7 +4904,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -5377,7 +5364,6 @@ "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==", "dev": true, "license": "MPL-2.0", - "peer": true, "engines": { "node": ">=4" } @@ -5670,7 +5656,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.19", "caniuse-lite": "^1.0.30001751", @@ -6483,6 +6468,7 @@ "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "is-what": "^3.14.1" }, @@ -6793,7 +6779,8 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/dashdash": { "version": "1.14.1", @@ -7019,8 +7006,7 @@ "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1508733.tgz", "integrity": "sha512-QJ1R5gtck6nDcdM+nlsaJXcelPEI7ZxSMw1ujHpO1c4+9l+Nue5qlebi9xO1Z2MGr92bFOQTW7/rrheh5hHxDg==", "dev": true, - "license": "BSD-3-Clause", - "peer": true + "license": "BSD-3-Clause" }, "node_modules/diff": { "version": "5.2.0", @@ -7462,7 +7448,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -7580,7 +7565,6 @@ "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -7641,7 +7625,6 @@ "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", "dev": true, "license": "MIT", - "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -8882,7 +8865,6 @@ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz", "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==", "license": "BSD-3-Clause", - "peer": true, "engines": { "node": ">=12.0.0" } @@ -9141,6 +9123,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "bin": { "image-size": "bin/image-size.js" }, @@ -9601,7 +9584,8 @@ "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/is-windows": { "version": "1.0.2", @@ -10117,6 +10101,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "prr": "~1.0.1" }, @@ -10131,6 +10116,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "pify": "^4.0.1", "semver": "^5.6.0" @@ -10146,6 +10132,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "bin": { "mime": "cli.js" }, @@ -10160,6 +10147,7 @@ "dev": true, "license": "ISC", "optional": true, + "peer": true, "bin": { "semver": "bin/semver" } @@ -10171,6 +10159,7 @@ "dev": true, "license": "BSD-3-Clause", "optional": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -10929,6 +10918,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "iconv-lite": "^0.6.3", "sax": "^1.2.4" @@ -10947,6 +10937,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" }, @@ -11486,6 +11477,7 @@ "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">= 0.10" } @@ -11835,7 +11827,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -12495,7 +12486,6 @@ "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -12550,7 +12540,6 @@ "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "posthtml-parser": "^0.11.0", "posthtml-render": "^3.0.0" @@ -12703,7 +12692,6 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -12879,7 +12867,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz", "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==", "license": "MIT", - "peer": true, "dependencies": { "orderedmap": "^2.0.0" } @@ -12909,7 +12896,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz", "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==", "license": "MIT", - "peer": true, "dependencies": { "prosemirror-model": "^1.0.0", "prosemirror-transform": "^1.0.0", @@ -12940,7 +12926,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.3.tgz", "integrity": "sha512-SqMiYMUQNNBP9kfPhLO8WXEk/fon47vc52FQsUiJzTBuyjKgEcoAwMyF04eQ4WZ2ArMn7+ReypYL60aKngbACQ==", "license": "MIT", - "peer": true, "dependencies": { "prosemirror-model": "^1.20.0", "prosemirror-state": "^1.0.0", @@ -13198,7 +13183,6 @@ "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -13209,7 +13193,6 @@ "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -13679,7 +13662,6 @@ "integrity": "sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -14624,7 +14606,6 @@ "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -14710,7 +14691,6 @@ "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -15281,7 +15261,6 @@ "integrity": "sha512-es7uDdEwRVVUAt7XLAZZ1hicOq9r4ov5NFeFPpa2YEyAsyHYOCr0CTlHBfslWG6D5EVNWK3kVIIuW8GHB6hEig==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@storybook/global": "^5.0.0", "@testing-library/jest-dom": "^6.6.3", @@ -15779,7 +15758,6 @@ "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.42.2.tgz", "integrity": "sha512-iSry5jsBHispVczyt9UrBX/1qu3HQ/UyKPAIjqlvlu3o/eUvc+kpyMyRS2O4HLLx4MvLurLGIUOyyP11pyD59g==", "license": "MIT", - "peer": true, "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", @@ -16244,7 +16222,6 @@ "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.15.0", @@ -16591,7 +16568,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -16827,7 +16803,6 @@ "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", @@ -16946,7 +16921,6 @@ "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/chai": "^5.2.2", "@vitest/expect": "3.2.4", @@ -17085,7 +17059,6 @@ "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -17135,7 +17108,6 @@ "integrity": "sha512-MfwFQ6SfwinsUVi0rNJm7rHZ31GyTcpVE5pgVA3hwFRb7COD4TzjUUwhGWKfO50+xdc2MQPuEBBJoqIMGt3JDw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@discoveryjs/json-ext": "^0.6.1", "@webpack-cli/configtest": "^3.0.1", diff --git a/packages/stacks-classic/lib/components/banner/banner.less b/packages/stacks-classic/lib/components/banner/banner.less index b48442bf40..61373d4136 100644 --- a/packages/stacks-classic/lib/components/banner/banner.less +++ b/packages/stacks-classic/lib/components/banner/banner.less @@ -5,6 +5,13 @@ --_no-ty-offset: 0; --_no-ty: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))); .construct-notice-component(s-banner); + + &--icon { + //Remove the icon backgound color + --_no-icon-bg: transparent; + margin-right: var(--su8); + align-self: flex-start; + } &[aria-hidden="true"] { // If you want to hide and reveal the banner --_no-ty-offset: -1; @@ -27,18 +34,12 @@ padding-top: 93px; } - & &--container { // When we want to keep hero content capped - margin: 0 auto; - max-width: var(--su1024); - position: relative; - width: 100%; - } - - border-width: 0 0 var(--su-static1); + display: flex; + align-items: center; + padding: var(--su16); inset: 0 0 auto 0; - padding: var(--su12); position: fixed; transform: translate3d(0, calc(var(--_no-ty) * var(--_no-ty-offset)), 0); width: 100%; z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar -} +} \ No newline at end of file diff --git a/packages/stacks-classic/lib/components/notice/notice.less b/packages/stacks-classic/lib/components/notice/notice.less index a67c509b0a..c84ad5687e 100644 --- a/packages/stacks-classic/lib/components/notice/notice.less +++ b/packages/stacks-classic/lib/components/notice/notice.less @@ -27,8 +27,9 @@ /** * Generate styles for a notice-based component * - * Usage example: + * Usage examples: * .construct-notice-component(s-banner); + * .construct-notice-component(s-notice); * * @baseClass - The base class name for the notice component */ @@ -110,7 +111,6 @@ &__warning { &:not(.@{baseClass}__important) { .generate-variant-variables(yellow); - } &.@{baseClass}__important { @@ -164,16 +164,26 @@ background-color: var(--_no-fc); color: var(--_no-bg); } + color: var(--_no-fc); } - :has(>button&--dismiss) { + &--actions { + display: flex; + margin-left: auto; + align-self: flex-start; padding-left: var(--su24); - //Add spacing between multiple notice actions + color: var(--_no-fc); gap: calc(var(--su24) - var(--su2)); //22px + //Fix css issue caused by svelte-sonner-toast in the NoticeAction svelte component word-wrap: initial !important; } + //Fix notice action color for __important variant + &--actions > .s-link:not(&--dismiss) { + color: var(--_no-fc); + } + // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES background: var(--_no-bg); color: var(--_no-fc); @@ -195,10 +205,6 @@ margin-right: var(--su12); align-self: stretch; - //Position the svg icon - display: flex; - align-items: top; - //Negative margin to make up for s-notice's padding margin-top: calc(var(--_no-pd) * -1); margin-bottom: calc(var(--_no-pd) * -1); diff --git a/packages/stacks-docs/_data/banners.json b/packages/stacks-docs/_data/banners.json index bf82a3f2c0..b40e208cca 100644 --- a/packages/stacks-docs/_data/banners.json +++ b/packages/stacks-docs/_data/banners.json @@ -6,9 +6,14 @@ "description": "Base banner parent class. This defaults to a system banner style." }, { - "class": ".s-banner--btn", + "class": ".s-banner--dismiss", "applies": ".s-banner", - "description": "Child element applied to .s-btn within a banner to give it a subtle tint that’s appropriate in that context." + "description": "Applies to child button element within the banner to position it appropriately." + }, + { + "class": ".s-banner--actions", + "applies": ".s-banner", + "description": "Container styling for banner actions including the dismiss button." }, { "class": ".s-banner__info", @@ -30,6 +35,16 @@ "applies": ".s-banner", "description": "Applies danger (red) visual styles." }, + { + "class": ".s-banner__featured", + "applies": ".s-banner", + "description": "Applies featured (purple) visual styles." + }, + { + "class": ".s-banner__activity", + "applies": ".s-banner", + "description": "Applies activity (pink) visual styles." + }, { "class": ".s-banner__important", "applies": ".s-banner", diff --git a/packages/stacks-docs/_data/notices.json b/packages/stacks-docs/_data/notices.json index 9f53760ea5..d38ef173fd 100644 --- a/packages/stacks-docs/_data/notices.json +++ b/packages/stacks-docs/_data/notices.json @@ -36,9 +36,14 @@ "description": "Default style used to separate notices from the main content." }, { - "class": ".s-notice--btn", - "applies": "N/A", - "description": "Child element applied to .s-btn within a toast to give it a subtle tint that’s appropriate in that context." + "class": ".s-notice--dismiss", + "applies": ".s-notice", + "description": "Applies to child button element within the banner to position it appropriately." + }, + { + "class": ".s-notice--actions", + "applies": ".s-notice", + "description": "Container styling for notice actions including the dismiss button." }, { "class": ".s-notice__info", diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index 16cd588525..412a1e0e81 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -232,7 +232,8 @@ }, { "title": "Banners", - "url": "/product/components/banners/" + "url": "/product/components/banners/", + "new": true }, { "title": "Bling", diff --git a/packages/stacks-docs/assets/js/entry.banners.js b/packages/stacks-docs/assets/js/entry.banners.js index b587a43e5c..53fcda94e7 100644 --- a/packages/stacks-docs/assets/js/entry.banners.js +++ b/packages/stacks-docs/assets/js/entry.banners.js @@ -8,7 +8,7 @@ $(document).ready(function() { var sysStyleMenu = $(".js-sys-banner-style-menu"); var sysType = $(".js-sys-banner-type"); var sysPos = $(".js-sys-banner-position"); - var typeClasses = ["info", "success", "warning", "danger", "dark", "important"].map(suffix => `s-banner__${suffix}`).join(" ") + " is-pinned"; + var typeClasses = ["info", "success", "warning", "danger", "featured", "activity", "important"].map(suffix => `s-banner__${suffix}`).join(" ") + " is-pinned"; function setShowHideBtns(show) { if (show) { diff --git a/packages/stacks-docs/plugins/banner-example.js b/packages/stacks-docs/plugins/banner-example.js index 0bc8e06bef..2562f47cc8 100644 --- a/packages/stacks-docs/plugins/banner-example.js +++ b/packages/stacks-docs/plugins/banner-example.js @@ -1,10 +1,10 @@ -const { Icons } = require("@stackoverflow/stacks-icons-legacy"); +const { Icons } = require("@stackoverflow/stacks-icons"); module.exports = { configFunction(eleventyConfig) { eleventyConfig.addLiquidShortcode("bannerExample", function(type, important, classes) { - var lockIcon = Icons.IconLock; - var closeIcon = Icons.IconClearSm; + var typeIcon = Icons.IconAlert; + var btnIcon = Icons.IconCross; // add type switch statement function getTypeClass() { @@ -17,6 +17,10 @@ module.exports = { return "s-banner__warning"; case "danger": return "s-banner__danger"; + case "activity": + return "s-banner__activity"; + case "featured": + return "s-banner__featured"; default: return ""; } @@ -30,17 +34,13 @@ module.exports = { } return ``; }); } diff --git a/packages/stacks-docs/product/components/banners.html b/packages/stacks-docs/product/components/banners.html index c47575339a..75613c82db 100644 --- a/packages/stacks-docs/product/components/banners.html +++ b/packages/stacks-docs/product/components/banners.html @@ -1,7 +1,7 @@ --- layout: page title: Banners -figma: https://svelte.stackoverflow.design/figma/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. tags: components --- @@ -9,20 +9,12 @@ @@ -265,6 +259,30 @@ {% bannerExample "danger", "true", "mt8" %} + + {% header "h3", "Featured" %} +
+ {% highlight html %} + + + {% endhighlight %} +
+ {% bannerExample "featured" %} + {% bannerExample "featured", "true", "mt8" %} +
+
+ + {% header "h3", "Activity" %} +
+ {% highlight html %} + + + {% endhighlight %} +
+ {% bannerExample "activity" %} + {% bannerExample "activity", "true", "mt8" %} +
+
{% header "h2", "JavaScript Example" %}
diff --git a/packages/stacks-docs/product/components/notices.html b/packages/stacks-docs/product/components/notices.html index c55916159b..0f6ea6bcfb 100644 --- a/packages/stacks-docs/product/components/notices.html +++ b/packages/stacks-docs/product/components/notices.html @@ -22,7 +22,7 @@
{% icon "Info" %} Toast notice message with an undo button -
+
@@ -437,7 +437,7 @@