docs: pattern for sorry pages #2676
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gfellerph
requested review from
b1aserlu,
davidritter-dotcom and
a team
as code owners
🦋 Changeset detectedLatest commit: 0617ad8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 11 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
gfellerph
changed the title
|
Preview environment ready: https://preview-2676--swisspost-web-frontend.netlify.app |
oliverschuerch
requested changes
Feb 22, 2024
packages/documentation/src/stories/templates/error-page/error-page.stories.ts
Show resolved
Hide resolved
Comment on lines
6
to
10
| # Error page template | ||
|
|
||
| A generic error page pattern with an image. The image can be exchanged based on the type of error. | ||
|
|
||
| - 404 not found: <a download="/images/content/404.png" href="/images/content/404.png">Download "404 not found" image</a> |
There was a problem hiding this comment.
Wrap this content in a <div class="container"> element.
And as far as I know, the download attribute on a link should contain no value or at least only the filename/exension, but not the hole path (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).
gfellerph
requested review from
oliverschuerch
and removed request for
b1aserlu and
davidritter-dotcom
oliverschuerch
approved these changes
Mar 14, 2024
|
|
||
| A generic error page pattern with an image. The image can be exchanged based on the type of error. | ||
|
|
||
| - 404 not found: <a download href="/images/content/404.png">Download "404 not found" image</a> |
There was a problem hiding this comment.
The preceding text "404 not found:" is kind of irritating me. Wouldn't it be enough to just leave the text inside of the link?
There was a problem hiding this comment.
The example is very large and therefore (even if I now storybook probably pretty well) I was thinking about how to get the necessary code from the example.
It could be a good idea to add a note, and to tell visitors how to do this here.
Comment on lines
43
to
46
| <a class="btn btn-primary" href="/">Home page</a> | ||
| <a class="btn btn-secondary" href="https://www.post.ch/de/pages/suche#t=AllTab"> | ||
| Search | ||
| </a> |
There was a problem hiding this comment.
Add some click event listeners (@click="${e => e.preventDefault()}") on both links, to prevent default behaviour in the example. Because at least the Home page button is misleading us to our storybook root url.
|
|
@oliverschuerch I restructured the page a little to make it easier to navigate. Can you have another look please? |
oliverschuerch
approved these changes
Mar 26, 2024
gfellerph
pushed a commit
that referenced
this pull request
Apr 17, 2024
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @swisspost/[email protected] ### Major Changes - Synchronized the versions of the following packages: - @swisspost/design-system-styles - @swisspost/design-system-components - @swisspost/design-system-components-react - @swisspost/design-system-components-angular - @swisspost/design-system-migrations - @swisspost/design-system-icons - @swisspost/design-system-intranet-header This will help understanding the dependencies between these packages at a glance but also means that for the individual pacakges, semver is no longer being used. This enables us also to talk about and document Design System versions as a whole instead of documenting the fragmented versions in a complex lookup table. (by [@gfellerph](https://github.com/gfellerph) with [#2856](#2856)) - Updated the package entry properties in the package.json to the by stencil recommended files: - Updated the `main` property from `loader/index.cjs.js` to `dist/index.cjs.js` - Updated the `module` property from `loader/index.js` to `dist/loader.js` - Updated the `types` property from `loader/index.d.ts` to `dist/types/index.d.ts` - Removed the `es2017` property The usage of the `@swisspost/design-system-components/loader` entry files are still available and should be used to get the lazy-loaded components. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2886](#2886)) - Prefixed all web-component custom-events with the keyword `post`. - Changed `post-alert` component `dismissed` event to `postDismissed`. - Changed `post-card-control` component `input` and `change` events to `postInput` and `postChange`. - Changed `post-collapsible` component `collapseChange` event to `postToggle`. - Changed `post-rating` component `input` and `change` events to `postInput` and `postChange`. - Changed `post-tabs` component `tabChange` event to `postChange`. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2874](#2874)) ### Minor Changes - Added a new `tag` component. This component is available in standard HTML or as webcomponent. (by [@b1aserlu](https://github.com/b1aserlu) with [#2552](#2552)) - Added a new web-component `post-card-control`, which works like a native `input[type="checkbox"]` or `input[type="radio"]` but with a custom visual design. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2260](#2260)) - Added the new default slot, to allow the integration of custom HTML in the card-control component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2844](#2844)) ### Patch Changes - Fixed accessibility of aria controls through post-tabs components. (by [@imagoiq](https://github.com/imagoiq) with [#2777](#2777)) - Fixed post-tooltip that doesn't show up when the pointer is on a child element (like an icon). (by [@imagoiq](https://github.com/imagoiq) with [#2814](#2814)) - Fixed Collapsible and Accordion element's content which is displayed when hidden on Webkit/Safari. (by [@imagoiq](https://github.com/imagoiq) with [#2963](#2963)) - Added new black and white alpha colors. Replaced hardcoded alpha colors with the new color definitions in `card-control` component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Updated Sass color variables: - Removed variables `$success-green`, `$error-red`, `$warning-orange`, `$success-text`, `$error-text`, `$danger` as well as the Sass map `$contextual-colors`. Instead use the variables `$success`, `$error`, `$warning` and the Sass map `$signal-colors`. - Updated the Sass map `$signal-colors` keys and added a new Sass map `$signal-background-colors`. - Updated the Sass map `$background-colors` and all the dependant packages accordingly. With the exception of the components `notification`, `toast` and `tag`, there is no component providing a `danger` variant anymore. Instead use the `error` variant. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Synchronized the versions of the following packages: - @swisspost/design-system-styles - @swisspost/design-system-components - @swisspost/design-system-components-react - @swisspost/design-system-components-angular - @swisspost/design-system-migrations - @swisspost/design-system-icons - @swisspost/design-system-intranet-header This will help understanding the dependencies between these packages at a glance but also means that for the individual pacakges, semver is no longer being used. This enables us also to talk about and document Design System versions as a whole instead of documenting the fragmented versions in a complex lookup table. (by [@gfellerph](https://github.com/gfellerph) with [#2856](#2856)) - Added support for Angular 17. (by [@alizedebray](https://github.com/alizedebray) with [#2760](#2760)) ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Synchronized the versions of the following packages: - @swisspost/design-system-styles - @swisspost/design-system-components - @swisspost/design-system-components-react - @swisspost/design-system-components-angular - @swisspost/design-system-migrations - @swisspost/design-system-icons - @swisspost/design-system-intranet-header This will help understanding the dependencies between these packages at a glance but also means that for the individual pacakges, semver is no longer being used. This enables us also to talk about and document Design System versions as a whole instead of documenting the fragmented versions in a complex lookup table. (by [@gfellerph](https://github.com/gfellerph) with [#2856](#2856)) ### Minor Changes - Added icons number 2579, 2580, 2581, 2582, 2583 and 2584. (by [@swisspost-bot](https://github.com/swisspost-bot) with [#2773](#2773)) ### Patch Changes - Updated icons number 1000, 1001, 1002, 1003, 1004, 1005, 1006, 1007, 1008, 1009, 1010, 1011, 1012, 1013, 1014, 1015, 1016, 1017, 1018, 1019, 1020, 1021, 1022, 1023, 1024, 1025, 1026, 1027, 1028, 1029, 1030, 1031, 1032, 1033, 1034, 1035, 1036, 1037, 1038, 1039, 1040, 1042, 1043, 1044, 1045, 1046, 1047, 1048, 1049, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030, 2031, 2032, 2033, 2034, 2035, 2036, 2037, 2038, 2039, 2040, 2041, 2042, 2043, 2044, 2045, 2046, 2047, 2048, 2049, 2050, 2051, 2052, 2053, 2054, 2055, 2056, 2057, 2058, 2059, 2060, 2061, 2062, 2063, 2064, 2065, 2066, 2067, 2068, 2069, 2070, 2071, 2072, 2073, 2074, 2075, 2076, 2077, 2078, 2079, 2080, 2081, 2082, 2083, 2084, 2085, 2086, 2087, 2088, 2089, 2090, 2091, 2092, 2093, 2094, 2095, 2096, 2097, 2098, 2099, 2100, 2101, 2102, 2103, 2104, 2105, 2106, 2107, 2108, 2109, 2110, 2111, 2112, 2113, 2114, 2115, 2116, 2117, 2118, 2119, 2120, 2121, 2122, 2123, 2124, 2125, 2126, 2127, 2128, 2129, 2130, 2131, 2132, 2133, 2134, 2135, 2136, 2137, 2138, 2139, 2140, 2141, 2142, 2143, 2144, 2145, 2146, 2147, 2148, 2149, 2150, 2151, 2152, 2153, 2154, 2155, 2156, 2157, 2158, 2159, 2160, 2161, 2162, 2163, 2164, 2165, 2166, 2167, 2168, 2169, 2170, 2171, 2172, 2173, 2174, 2175, 2176, 2177, 2178, 2179, 2180, 2181, 2182, 2183, 2184, 2185, 2186, 2187, 2188, 2189, 2190, 2191, 2192, 2193, 2194, 2195, 2196, 2197, 2198, 2199, 2200, 2201, 2202, 2203, 2205, 2206, 2207, 2208, 2209, 2210, 2211, 2212, 2213, 2214, 2215, 2216, 2217, 2218, 2219, 2220, 2221, 2222, 2223, 2224, 2225, 2226, 2227, 2228, 2229, 2230, 2231, 2232, 2233, 2234, 2235, 2236, 2237, 2238, 2239, 2240, 2241, 2242, 2243, 2244, 2245, 2246, 2247, 2248, 2249, 2250, 2251, 2252, 2253, 2254, 2255, 2256, 2257, 2258, 2259, 2260, 2261, 2262, 2263, 2264, 2265, 2266, 2267, 2268, 2269, 2270, 2271, 2272, 2273, 2274, 2275, 2276, 2277, 2278, 2279, 2280, 2281, 2282, 2283, 2284, 2285, 2286, 2287, 2288, 2289, 2290, 2291, 2292, 2293, 2294, 2295, 2296, 2297, 2298, 2299, 2300, 2301, 2302, 2303, 2304, 2305, 2306, 2307, 2308, 2309, 2310, 2311, 2312, 2313, 2314, 2315, 2316, 2317, 2318, 2319, 2320, 2321, 2322, 2323, 2324, 2325, 2326, 2327, 2328, 2329, 2330, 2331, 2332, 2333, 2334, 2335, 2336, 2337, 2338, 2339, 2340, 2341, 2342, 2343, 2344, 2345, 2346, 2347, 2348, 2349, 2350, 2351, 2352, 2353, 2354, 2355, 2356, 2357, 2358, 2359, 2360, 2361, 2362, 2363, 2364, 2365, 2366, 2367, 2368, 2369, 2370, 2371, 2372, 2373, 2374, 2375, 2376, 2377, 2378, 2379, 2380, 2381, 2382, 2383, 2384, 2385, 2386, 2387, 2388, 2389, 2390, 2391, 2392, 2393, 2394, 2395, 2396, 2397, 2398, 2399, 2400, 2401, 2402, 2403, 2404, 2405, 2406, 2407, 2408, 2409, 2410, 2411, 2412, 2413, 2414, 2415, 2416, 2417, 2418, 2419, 2420, 2421, 2422, 2423, 2424, 2425, 2426, 2427, 2428, 2429, 2430, 2431, 2432, 2433, 2434, 2435, 2436, 2437, 2438, 2439, 2440, 2441, 2442, 2443, 2444, 2445, 2446, 2447, 2448, 2449, 2450, 2451, 2452, 2453, 2454, 2455, 2456, 2457, 2458, 2459, 2460, 2461, 2462, 2463, 2464, 2465, 2466, 2467, 2468, 2469, 2470, 2471, 2472, 2473, 2474, 2475, 2476, 2477, 2478, 2479, 2480, 2481, 2482, 2483, 2484, 2485, 2486, 2487, 2488, 2489, 2490, 2491, 2492, 2493, 2494, 2495, 2496, 2497, 2498, 2499, 2500, 2501, 2502, 2503, 2504, 2505, 2506, 2507, 2508, 2509, 2510, 2511, 2512, 2513, 2514, 2515, 2516, 2517, 2518, 2519, 2520, 2521, 2522, 2523, 2524, 2525, 2526, 2527, 2528, 2529, 2530, 2531, 2532, 2533, 2534, 2535, 2536, 2537, 2538, 2539, 2540, 2541, 2542, 2543, 2544, 2545, 2546, 2547, 2548, 2549, 2550, 2551, 2552, 2553, 2554, 2555, 2556, 2557, 2558, 2559, 2560, 2561, 2562, 2563, 2564, 2565, 2566, 2567, 2568, 2569, 2570, 2571, 2572, 2573, 2574, 2575, 2576, 2577, 2578, 2579, 2580, 2581, 2582, 2583, 2584, 3000, 3001, 3002, 3003, 3004, 3005, 3006, 3007, 3008, 3009, 3010, 3011, 3012, 3013, 3014, 3015, 3016, 3017, 3018, 3019, 3020, 3021, 3022, 3023, 3024, 3025, 3026, 3027, 3028, 3029, 3030, 3031, 3032, 3033, 3034, 3035, 3036, 3037, 3038, 3039, 3040, 3041, 3042, 3043, 3044, 3045, 3046, 3047, 3048, 3049, 3050, 3051, 3052, 3053, 3054, 3055, 3056, 3057, 3058, 3059, 3060, 3061, 3062, 3063, 3064, 3065, 3066, 3067, 3068, 3069, 3070, 3071, 3072, 3073, 3074, 3075, 3076, 3077, 3078, 3079, 3080, 3081, 3082, 3083, 3084, 3085, 3086, 3087, 3088, 3089, 3090, 3091, 3092, 3093, 3094, 3095, 3096, 3097, 3098, 3099, 3100, 3101, 3102, 3103, 3104, 3105, 3106, 3107, 3108, 3109, 3110, 3111, 3112, 3113, 3114, 3115, 3116, 3117, 3118, 3119, 3120, 3121, 3122, 3123, 3124, 3125, 3126, 3127, 3128, 3129, 3130, 3131, 3132, 3133, 3134, 3135, 3136, 3137, 3138, 3139, 3140, 3141, 3142, 3143, 3144, 3145, 3146, 3147, 3148, 3149, 3150, 3151, 3152, 3153, 3154, 3155, 3156, 3157, 3158, 3159, 3160, 3161, 3162, 3163, 3164, 3165, 3166, 3167, 3168, 3169, 3170, 3171, 3172, 3173, 3174, 3175, 3176, 3177, 3178, 3179, 3180, 3181, 3182, 3183, 3184, 3185, 3186, 3187, 3188, 3189, 3190, 3191, 3192, 3193, 3194, 3195, 3196, 3197, 3198, 3199, 3200, 3201, 3202, 3203, 3204, 3205, 3206, 3207, 3208, 3209, 3210, 3211, 3212, 3213, 3214, 3215, 3216, 3217, 3218, 3219, 3220, 3221, 3222, 3223, 3224, 3225, 3226, 3227, 3228, 3229, 3230, 3231, 3232, 3233, 3234, 3235, 3236, 3237, 3238, 3239, 3240, 3241, 3242, 3243, 3244, 3245, 3246, 3247, 3248, 3249, 3250, 3251, 3252, 3253, 3254, 3255, 3256, 3257, 3258, 3259, 3260, 8000, 8001, 8002, 8004, 8005, 8006, 8007, 8008, 8009, 8010, 8011, 8012, 8013, 8014, 8015, 8016, 8017, 8018 and 8019. (by [@swisspost-bot](https://github.com/swisspost-bot) with [#2941](#2941)) ## @swisspost/[email protected] ### Major Changes - Synchronized the versions of the following packages: - @swisspost/design-system-styles - @swisspost/design-system-components - @swisspost/design-system-components-react - @swisspost/design-system-components-angular - @swisspost/design-system-migrations - @swisspost/design-system-icons - @swisspost/design-system-intranet-header This will help understanding the dependencies between these packages at a glance but also means that for the individual pacakges, semver is no longer being used. This enables us also to talk about and document Design System versions as a whole instead of documenting the fragmented versions in a complex lookup table. (by [@gfellerph](https://github.com/gfellerph) with [#2856](#2856)) ### Minor Changes - Changed mobile navigation trigger to make it more accessible by default using a button element. (by [@imagoiq](https://github.com/imagoiq) with [#2834](#2834)) ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Synchronized the versions of the following packages: - @swisspost/design-system-styles - @swisspost/design-system-components - @swisspost/design-system-components-react - @swisspost/design-system-components-angular - @swisspost/design-system-migrations - @swisspost/design-system-icons - @swisspost/design-system-intranet-header This will help understanding the dependencies between these packages at a glance but also means that for the individual pacakges, semver is no longer being used. This enables us also to talk about and document Design System versions as a whole instead of documenting the fragmented versions in a complex lookup table. (by [@gfellerph](https://github.com/gfellerph) with [#2856](#2856)) ### Minor Changes - Added migrations to turn badges into chips. (by [@alizedebray](https://github.com/alizedebray) with [#2855](#2855)) ### Patch Changes - Updated instructions to run the automated migrations from the migration package. (by [@alizedebray](https://github.com/alizedebray) with [#2783](#2783)) ## @swisspost/[email protected] ### Major Changes - Restricted badges to showcase counts exclusively and set their color to red by default. Use tags to display states, properties, or other metadata. Opt for chips when presenting dismissible or selectable information. Use the background utility classes to change the badge color as needed. (by [@alizedebray](https://github.com/alizedebray) with [#2860](#2860)) - Refactored brand colors. Renamed `$gray-background` SCSS variable to `$gray` and removed `$gray-background-light` variable because it is a duplication of the already existing variable `$light`. Updated the usage of said variables in dependant packages accordingly. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Synchronized the versions of the following packages: - @swisspost/design-system-styles - @swisspost/design-system-components - @swisspost/design-system-components-react - @swisspost/design-system-components-angular - @swisspost/design-system-migrations - @swisspost/design-system-icons - @swisspost/design-system-intranet-header This will help understanding the dependencies between these packages at a glance but also means that for the individual pacakges, semver is no longer being used. This enables us also to talk about and document Design System versions as a whole instead of documenting the fragmented versions in a complex lookup table. (by [@gfellerph](https://github.com/gfellerph) with [#2856](#2856)) - Added support for Angular 17 and ng-bootstrap 16. (by [@alizedebray](https://github.com/alizedebray) with [#2760](#2760)) - Updated Sass color variables: - Removed variables `$success-green`, `$error-red`, `$warning-orange`, `$success-text`, `$error-text`, `$danger` as well as the Sass map `$contextual-colors`. Instead use the variables `$success`, `$error`, `$warning` and the Sass map `$signal-colors`. - Updated the Sass map `$signal-colors` keys and added a new Sass map `$signal-background-colors`. - Updated the Sass map `$background-colors` and all the dependant packages accordingly. With the exception of the components `notification`, `toast` and `tag`, there is no component providing a `danger` variant anymore. Instead use the `error` variant. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Renamed the badge into "chip", added a disable state and updated its styles. (by [@alizedebray](https://github.com/alizedebray) with [#2855](#2855)) ### Minor Changes - Added new black and white alpha colors. Replaced hardcoded alpha colors with the new color definitions in `card-control` component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Changed mobile navigation trigger to make it more accessible by default using a button element. (by [@imagoiq](https://github.com/imagoiq) with [#2834](#2834)) - Added a new `tag` component. This component is available in standard HTML or as webcomponent. (by [@b1aserlu](https://github.com/b1aserlu) with [#2552](#2552)) - Introduced new focus style for text input and select, and added new wrapper element `.focus-control-wrapper`, `.form-range-wrapper`, `.form-select-wrapper`. (by [@imagoiq](https://github.com/imagoiq) with [#2774](#2774)) - Added new focus color variables. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Added a pattern for error pages with an image. Currently available is a graphic for "404 not found" errors. More error types may be supported in the future. (by [@gfellerph](https://github.com/gfellerph) with [#2676](#2676)) ### Patch Changes - Adjusted focus styles with new color for button, checkbox, radio, switch, rating elements. (by [@imagoiq](https://github.com/imagoiq) with [#2780](#2780)) - Updated size of radio button to match design. (by [@imagoiq](https://github.com/imagoiq) with [#2737](#2737)) - Fixed the `.form-check-input` background-color, by setting it to white on none or light backgrounds. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2260](#2260)) - Added a workaround to display progress bar on input range and on webkit browsers without JavaScript. (by [@imagoiq](https://github.com/imagoiq) with [#2781](#2781)) - Fixed color and border-color on hover for checkbox and radio form element. (by [@imagoiq](https://github.com/imagoiq) with [#2961](#2961)) - Added new disabled styles for radio and checkbox, fixed color contrast on this state and fixed cursor style. (by [@imagoiq](https://github.com/imagoiq) with [#2813](#2813)) - Fixed layout on post-alert with medium (md) breakpoint. (by [@imagoiq](https://github.com/imagoiq) with [#2775](#2775)) - Fixed wrongly escaped Sass variables in the form-switch hcm styles, which caused problems in the styles of the card-control component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2965](#2965)) - Replaced `system-ui` fallback font with a list of fallbacks to avoid rendering issues with specific writing system (chinese, arabic…). (by [@imagoiq](https://github.com/imagoiq) with [#2735](#2735)) - Fixed active button color-contrast on dark background (by [@imagoiq](https://github.com/imagoiq) with [#2823](#2823)) - Replace all parts that used the old success color with the new success-green color. (by [@imagoiq](https://github.com/imagoiq) with [#2808](#2808)) - Fixed usage of background color on checkbox which make the checkmark invisible on dark background. (by [@imagoiq](https://github.com/imagoiq) with [#2953](#2953)) - Made styling more coherent for forms elements with High contrast mode and focus/hover state. (by [@imagoiq](https://github.com/imagoiq) with [#2774](#2774)) - Refactored the new focus style to only be visible when using keyboard for form elements. (by [@imagoiq](https://github.com/imagoiq) with [#2810](#2810)) - Fixed color contrast of alert component on success background color. (by [@imagoiq](https://github.com/imagoiq) with [#2845](#2845)) - Fixed form validation feedback color and indicators in high contrast mode. (by [@imagoiq](https://github.com/imagoiq) with [#2766](#2766)) ## @swisspost/[email protected] ### Patch Changes - Refactored brand colors. Renamed `$gray-background` SCSS variable to `$gray` and removed `$gray-background-light` variable because it is a duplication of the already existing variable `$light`. Updated the usage of said variables in dependant packages accordingly. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Fixed logo not scaled properly for header with no meta navigation. (by [@alizedebray](https://github.com/alizedebray) with [#2787](#2787)) - Sanitized hours fields in footer against XSS "Incomplete multi-character sanitization" issue. (by [@imagoiq](https://github.com/imagoiq) with [#2807](#2807)) - Replaced `system-ui` fallback font with a list of fallbacks to avoid rendering issues with specific writing system (chinese, arabic…). (by [@imagoiq](https://github.com/imagoiq) with [#2735](#2735)) - Fixed an issue with invisible focus rings when not using the Design System Styles along with the Swisspost Internet Header. Focus rings are now displayed as expected. (by [@gfellerph](https://github.com/gfellerph) with [#2793](#2793)) - Hide the main navigation custom content when empty. (by [@alizedebray](https://github.com/alizedebray) with [#2786](#2786)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Synchronized the versions of the following packages: - @swisspost/design-system-styles - @swisspost/design-system-components - @swisspost/design-system-components-react - @swisspost/design-system-components-angular - @swisspost/design-system-migrations - @swisspost/design-system-icons - @swisspost/design-system-intranet-header This will help understanding the dependencies between these packages at a glance but also means that for the individual pacakges, semver is no longer being used. This enables us also to talk about and document Design System versions as a whole instead of documenting the fragmented versions in a complex lookup table. (by [@gfellerph](https://github.com/gfellerph) with [#2856](#2856)) ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Renamed badge into "chip" and improved related examples. (by [@alizedebray](https://github.com/alizedebray) with [#2855](#2855)) ### Minor Changes - Added changelogs for all packages. (by [@alizedebray](https://github.com/alizedebray) with [#2877](#2877)) - Added new black and white alpha colors. Replaced hardcoded alpha colors with the new color definitions in `card-control` component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Changed mobile navigation trigger to make it more accessible by default using a button element. (by [@imagoiq](https://github.com/imagoiq) with [#2834](#2834)) - Added a new `tag` component. This component is available in standard HTML or as webcomponent. (by [@b1aserlu](https://github.com/b1aserlu) with [#2552](#2552)) - Added a new web-component `post-card-control`, which works like a native `input[type="checkbox"]` or `input[type="radio"]` but with a custom visual design. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2260](#2260)) - Added new focus color variables. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Added a pattern for error pages with an image. Currently available is a graphic for "404 not found" errors. More error types may be supported in the future. (by [@gfellerph](https://github.com/gfellerph) with [#2676](#2676)) - Added migration guide for updating the @swisspost/design-system-styles from v.6 to v7. (by [@alizedebray](https://github.com/alizedebray) with [#2877](#2877)) - Added the new default slot, to allow the integration of custom HTML in the card-control component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2844](#2844)) ### Patch Changes - Updated instructions to run the automated migrations from the migration package. (by [@alizedebray](https://github.com/alizedebray) with [#2783](#2783)) - Moved the style package changelog and migration guide to the "Getting Started" section of the documentation. (by [@alizedebray](https://github.com/alizedebray) with [#2877](#2877)) - Restricted badges to showcase counts exclusively and set their color to red by default. Use tags to display states, properties, or other metadata. Opt for chips when presenting dismissible or selectable information. Use the background utility classes to change the badge color as needed. (by [@alizedebray](https://github.com/alizedebray) with [#2860](#2860)) - Refactored brand colors. Renamed `$gray-background` SCSS variable to `$gray` and removed `$gray-background-light` variable because it is a duplication of the already existing variable `$light`. Updated the usage of said variables in dependant packages accordingly. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Fixed missing LinkTo element on post-rating docs page and removed all remaining LinkTo elements. (by [@imagoiq](https://github.com/imagoiq) with [#2962](#2962)) - Merged toast live region section with accessibility page. (by [@imagoiq](https://github.com/imagoiq) with [#2731](#2731)) - Prefixed all web-component custom-events with the keyword `post`. - Changed `post-alert` component `dismissed` event to `postDismissed`. - Changed `post-card-control` component `input` and `change` events to `postInput` and `postChange`. - Changed `post-collapsible` component `collapseChange` event to `postToggle`. - Changed `post-rating` component `input` and `change` events to `postInput` and `postChange`. - Changed `post-tabs` component `tabChange` event to `postChange`. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2874](#2874)) - Added link to figma for all components. (by [@imagoiq](https://github.com/imagoiq) with [#2875](#2875)) - Reworked the getting-started section to better understand the different packages and add more info about Angular. (by [@imagoiq](https://github.com/imagoiq) with [#2722](#2722)) - Changed references from <https://next.design-system.post.ch> to <https://design-system.post.ch> after the migration of Storybook, which is now our main documentation (by [@gfellerph](https://github.com/gfellerph) with [#2802](#2802)) - Updated Sass color variables: - Removed variables `$success-green`, `$error-red`, `$warning-orange`, `$success-text`, `$error-text`, `$danger` as well as the Sass map `$contextual-colors`. Instead use the variables `$success`, `$error`, `$warning` and the Sass map `$signal-colors`. - Updated the Sass map `$signal-colors` keys and added a new Sass map `$signal-background-colors`. - Updated the Sass map `$background-colors` and all the dependant packages accordingly. With the exception of the components `notification`, `toast` and `tag`, there is no component providing a `danger` variant anymore. Instead use the `error` variant. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Renamed input range to slider. (by [@imagoiq](https://github.com/imagoiq) with [#2792](#2792)) - Fixed table span on Safari for the Introduction page. (by [@imagoiq](https://github.com/imagoiq) with [#2964](#2964)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Added a new web-component `post-card-control`, which works like a native `input[type="checkbox"]` or `input[type="radio"]` but with a custom visual design. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2260](#2260)) ### Patch Changes - Updated Angular to version 17. (by [@alizedebray](https://github.com/alizedebray) with [#2760](#2760)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Changed mobile navigation trigger to make it more accessible by default using a button element. (by [@imagoiq](https://github.com/imagoiq) with [#2834](#2834)) ### Patch Changes - Updated instructions to run the automated migrations from the migration package. (by [@alizedebray](https://github.com/alizedebray) with [#2783](#2783)) - Fixed display of version switcher with new versions.json file. (by [@imagoiq](https://github.com/imagoiq) with [#2838](#2838)) - Refactored brand colors. Renamed `$gray-background` SCSS variable to `$gray` and removed `$gray-background-light` variable because it is a duplication of the already existing variable `$light`. Updated the usage of said variables in dependant packages accordingly. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Changed references from <https://next.design-system.post.ch> to <https://design-system.post.ch> after the migration of Storybook, which is now our main documentation (by [@gfellerph](https://github.com/gfellerph) with [#2802](#2802)) - Updated Sass color variables: - Removed variables `$success-green`, `$error-red`, `$warning-orange`, `$success-text`, `$error-text`, `$danger` as well as the Sass map `$contextual-colors`. Instead use the variables `$success`, `$error`, `$warning` and the Sass map `$signal-colors`. - Updated the Sass map `$signal-colors` keys and added a new Sass map `$signal-background-colors`. - Updated the Sass map `$background-colors` and all the dependant packages accordingly. With the exception of the components `notification`, `toast` and `tag`, there is no component providing a `danger` variant anymore. Instead use the `error` variant. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2861](#2861)) - Updated Angular to version 17. (by [@alizedebray](https://github.com/alizedebray) with [#2760](#2760)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated Angular to version 17. (by [@alizedebray](https://github.com/alizedebray) with [#2760](#2760)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This adds a small CSS part and a template for error pages.