Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into tokens/v2-24-10
Browse files Browse the repository at this point in the history
  • Loading branch information
@swisspost-bot
swisspost-bot committed Nov 5, 2024
2 parents 63b69be + 5603b2a commit 5bb0c39
Show file tree
Hide file tree
Showing 67 changed files with 895 additions and 935 deletions.
5 changes: 5 additions & 0 deletions .changeset/cuddly-gifts-film.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-styles': major
---

Removed regular button size. Buttons that were previously using `btn-rg` will now fall back to the default `btn-md` size.
5 changes: 5 additions & 0 deletions .changeset/fifty-dodos-wait.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-documentation': minor
---

Updated the Accessibility documentation section with Form Labels guidelines.
5 changes: 5 additions & 0 deletions .changeset/fifty-students-call.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-styles': major
---

Removed the `btn-animated` class. It no longer has any effect and can be removed from existing buttons.
5 changes: 5 additions & 0 deletions .changeset/rare-dryers-count.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-styles': minor
---

Updated button component to v2.
22 changes: 11 additions & 11 deletions packages/components-angular/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,28 @@
},
"private": true,
"dependencies": {
"@angular/animations": "18.2.9",
"@angular/common": "18.2.9",
"@angular/compiler": "18.2.9",
"@angular/core": "18.2.9",
"@angular/forms": "18.2.9",
"@angular/platform-browser": "18.2.9",
"@angular/platform-browser-dynamic": "18.2.9",
"@angular/router": "18.2.9",
"@angular/animations": "18.2.10",
"@angular/common": "18.2.10",
"@angular/compiler": "18.2.10",
"@angular/core": "18.2.10",
"@angular/forms": "18.2.10",
"@angular/platform-browser": "18.2.10",
"@angular/platform-browser-dynamic": "18.2.10",
"@angular/router": "18.2.10",
"@swisspost/design-system-components": "workspace:9.0.0-next.3",
"@swisspost/design-system-styles": "workspace:9.0.0-next.3",
"rxjs": "7.8.1",
"tslib": "2.6.3",
"zone.js": "0.14.8"
},
"devDependencies": {
"@angular-devkit/build-angular": "18.2.10",
"@angular-devkit/build-angular": "18.2.11",
"@angular-eslint/builder": "18.4.0",
"@angular-eslint/eslint-plugin": "18.4.0",
"@angular-eslint/eslint-plugin-template": "18.4.0",
"@angular-eslint/template-parser": "18.4.0",
"@angular/cli": "18.2.10",
"@angular/compiler-cli": "18.2.9",
"@angular/cli": "18.2.11",
"@angular/compiler-cli": "18.2.10",
"@cypress/schematic": "2.5.2",
"@typescript-eslint/eslint-plugin": "7.18.0",
"@typescript-eslint/parser": "7.18.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/components/cypress/fixtures/post-card-control.form-association.test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
</fieldset>
<div class="mt-16 d-flex gap-16 justify-content-end">
<button type="reset" class="btn btn-link"><post-icon name="2042"></post-icon>Reset</button>
<button type="submit" class="btn btn-primary btn-animated"><span>Submit</span></button>
<button type="submit" class="btn btn-primary"><span>Submit</span></button>
</div>
</form>
</body>
Expand Down
8 changes: 8 additions & 0 deletions packages/components/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,10 @@ export namespace Components {
* Wheter or not to display a little pointer arrow
*/
"arrow"?: boolean;
/**
* Gap between the edge of the page and the popover
*/
"edgeGap"?: number;
/**
* Programmatically hide this tooltip
*/
Expand Down Expand Up @@ -816,6 +820,10 @@ declare namespace LocalJSX {
* Wheter or not to display a little pointer arrow
*/
"arrow"?: boolean;
/**
* Gap between the edge of the page and the popover
*/
"edgeGap"?: number;
/**
* Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
*/
Expand Down
14 changes: 10 additions & 4 deletions packages/components/src/components/post-popovercontainer/post-popovercontainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,11 @@ export class PostPopovercontainer {
*/
@Prop() readonly placement?: Placement = 'top';

/**
* Gap between the edge of the page and the popover
*/
@Prop() readonly edgeGap?: number = 8;

/**
* Wheter or not to display a little pointer arrow
*/
Expand Down Expand Up @@ -144,11 +149,12 @@ export class PostPopovercontainer {
}

private async calculatePosition() {
const gap = this.edgeGap;
const middleware = [
flip(),
inline(),
shift({
padding: 8,
padding: gap,

// Prevents shifting away from the anchor too far, while shifting as far as possible
// https://floating-ui.com/docs/shift#limiter
Expand All @@ -159,15 +165,15 @@ export class PostPopovercontainer {
size({
apply({ availableWidth, elements }) {
Object.assign(elements.floating.style, {
maxWidth: `${availableWidth - 16}px`,
maxWidth: `${availableWidth - gap * 2}px`,
});
},
}),
offset(this.arrow ? 12 : 8), // 4px outside of element to account for focus outline + ~arrow size
offset(this.arrow ? gap + 4 : gap), // 4px outside of element to account for focus outline + ~arrow size
];

if (this.arrow) {
middleware.push(arrow({ element: this.arrowRef, padding: 8 }));
middleware.push(arrow({ element: this.arrowRef, padding: gap }));
}

const {
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/post-popovercontainer/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| `arrow` | `arrow` | Wheter or not to display a little pointer arrow | `boolean` | `false` |
| `edgeGap` | `edge-gap` | Gap between the edge of the page and the popover | `number` | `8` |
| `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` |


Expand Down
2 changes: 1 addition & 1 deletion packages/documentation/.storybook/blocks/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export default (params: { pathToStoryFile?: String }) => (
<div className="row mt-regular-r">
<div className="col-12 col-rg-auto mt-regular-r">
<a
className="btn-primary btn btn-rg btn-animated"
className="btn-primary btn"
href="https://github.com/swisspost/design-system/issues"
rel="noopener"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/documentation/src/shared/link-design/link-design.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export class LinkDesignComponent extends LitElement {
const titlePath = this.of?.default?.title;

return designParameter?.type === 'figma' && designParameter?.url
? html` <a class="figma-link btn btn-primary btn-rg btn-icon" href="${designParameter.url}">
? html` <a class="figma-link btn btn-primary" href="${designParameter.url}">
<img
src="/assets/images/technologies/logo-figma.svg"
alt=""
Expand Down
8 changes: 5 additions & 3 deletions packages/documentation/src/shared/nb-bootstrap/ngb-component-demo-link.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<a
className="btn btn-rg btn-secondary btn-animated"
className="btn btn-secondary"
href={`https://archive.design-system.post.ch/#/ng-bootstrap-samples/${props.component}`}

rel="nofollow noopener noreferrer"

rel="nofollow noopener noreferrer"

>

<span>See archived documentation</span>
</a>
8 changes: 5 additions & 3 deletions packages/documentation/src/shared/post-component-demo-link.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<a
className="btn btn-rg btn-secondary btn-animated"
className="btn btn-secondary"
href={`https://archive.design-system.post.ch/#/post-samples/${props.component}`}

rel="nofollow noopener noreferrer"

rel="nofollow noopener noreferrer"

>

<span>See archived documentation</span>
</a>
2 changes: 1 addition & 1 deletion packages/documentation/src/shared/tile/tile.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));

:host{
a {
@include utilities.focus-style() {
@include utilities.focus-style {
border-radius: post.$border-radius;
}
}
Expand Down
8 changes: 4 additions & 4 deletions packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,10 @@ export const Alert: Story = {
${args.action
? html`
<div class="alert-buttons">
<button class="btn btn-primary btn-animated">
<button class="btn btn-primary">
<span>Akcepti</span>
</button>
<button class="btn btn-secondary btn-animated">
<button class="btn btn-secondary">
<span>Aborti</span>
</button>
</div>
Expand All @@ -99,10 +99,10 @@ export const PostAlert: Story = {
'</p>';

const actionButton =
'<button class="btn btn-primary btn-animated" slot="actions" >' +
'<button class="btn btn-primary" slot="actions" >' +
'<span>Akcepti</span>' +
'</button>' +
'<button class="btn btn-secondary btn-animated" slot="actions" >' +
'<button class="btn btn-secondary" slot="actions" >' +
'<span>Aborti</span>' +
'</button>';

Expand Down
6 changes: 3 additions & 3 deletions packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ function externalControl(story: StoryFn, { args, context }: StoryContext) {

const button = html`
<a
class="btn btn-secondary btn-animated"
class="btn btn-secondary"
href="#"
@click="${(e: MouseEvent) => toggleAlert(e, args, updateArgs)}"
>
Expand Down Expand Up @@ -155,10 +155,10 @@ function renderAlert(args: Args) {
args.action
? html`
<div class="alert-buttons">
<button class="btn btn-primary btn-animated">
<button class="btn btn-primary">
<span>Akcepti</span>
</button>
<button class="btn btn-secondary btn-animated">
<button class="btn btn-secondary">
<span>Aborti</span>
</button>
</div>
Expand Down
10 changes: 3 additions & 7 deletions packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,7 @@ function externalControl(story: StoryFn, context: StoryContext) {
});

return html`
<a
class="btn btn-secondary btn-animated alert-button"
href="#"
@click="${(e: Event) => toggleAlert(e)}"
>
<a class="btn btn-secondary alert-button" href="#" @click="${(e: Event) => toggleAlert(e)}">
<span>${args.fixed ? 'Toggle Fixed Alert' : 'Reset Alert'}</span>
</a>
<div class="alert-container">${story(args, context)}</div>
Expand All @@ -128,8 +124,8 @@ export const Contents: Story = {
'</ul>' +
'<hr/>' +
'<p>Contentum momentum ipsum tipsum sit amet, consetetur sadipscing elitr.</p>' +
'<button slot="actions" class="btn btn-secondary btn-animated"><span>Aborti</span></button>' +
'<button slot="actions" class="btn btn-primary btn-animated"><span>Akcepti</span></button>',
'<button slot="actions" class="btn btn-secondary"><span>Aborti</span></button>' +
'<button slot="actions" class="btn btn-primary"><span>Akcepti</span></button>',
},
};

Expand Down
8 changes: 3 additions & 5 deletions packages/documentation/src/stories/components/button-group/button-group.docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,22 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
</nav>
</div>

<div className="lead">
Group a series of buttons together on a single line.
</div>
<div className="lead">Group a series of buttons together on a single line.</div>

<Canvas sourceState="shown" of={ButtonGroupStories.Default} />
<div className="hide-col-default">
<Controls of={ButtonGroupStories.Default} />
</div>

<StylesPackageImport components={["button-group"]} />
<StylesPackageImport components={['button-group']} />

## Concrete Examples of Application

The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.

### Sizing

You can change the size of buttons belonging to a group using button-sizing classes: `.btn-sm`, `.btn-rg` and `.btn-lg`.
You can change the size of buttons belonging to a group using button-sizing classes: `.btn-sm`, `.btn-md` and `.btn-lg`.
Just be sure to apply the same class to all buttons contained in the group.

<Canvas of={ButtonGroupStories.Sizing} />
Expand Down
3 changes: 1 addition & 2 deletions packages/documentation/src/stories/components/button-group/button-group.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,11 @@ const meta: MetaComponent = {
type: 'select',
labels: {
'btn-sm': 'Small',
'btn-rg': 'Regular',
'btn-md': 'Medium',
'btn-lg': 'Large',
},
},
options: ['btn-sm', 'btn-rg', 'btn-md', 'btn-lg'],
options: ['btn-sm', 'btn-md', 'btn-lg'],
table: {
category: 'General',
},
Expand Down
13 changes: 3 additions & 10 deletions packages/documentation/src/stories/components/button/button.docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,32 +22,25 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
<Controls of={ButtonStories.Default} />
</div>

<StylesPackageImport components={["button"]} required={{ icons: true }} />
<StylesPackageImport components={['button']} required={{ icons: true }} />

## Concrete Examples of Application

The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.

### Inverted

Inverted buttons don't need special classes anymore, just use any of the [background classes](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) to set the background and you're done for the day.
Inverted buttons don't need special classes, just use any of the [background classes](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) to set the background, as well as set the `data-color-scheme="dark"` to a parent element and you're done for the day.

<Canvas of={ButtonStories.Inverted} />

### Signal colors

Besides the usual and the accent button variations, there are also signal button colors.

<p className="alert alert-md alert-warning">These are only allowed for intranet applications!</p>

<Canvas of={ButtonStories.SignalColors} />

### Full-width

In some situation, it is desirable to display a button using the full available width,
for example when the button is displayed on mobile and stacked vertically with others.

To achieve that, you can use classes in the format:

- `.w-{size}` for the xs breakpoint,
- `.w-{breakpoint}-{size}` for breakpoints from sm to xxl.

Expand Down
9 changes: 5 additions & 4 deletions packages/documentation/src/stories/components/button/button.snapshot.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
import meta, { Default, SignalColors } from './button.stories';
import meta, { Default } from './button.stories';
import { html } from 'lit';
import { bombArgs } from '@/utils';

Expand All @@ -18,7 +18,10 @@ export const Button: Story = {
<div class="d-flex flex-wrap gap-4 align-items-start">
${['bg-white', 'bg-dark'].map(
bg => html`
<div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
<div
class="${bg} d-flex flex-wrap align-items-start gap-16 p-16"
data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
>
${bombArgs({
variant: context.argTypes.variant.options,
size: context.argTypes.size.options,
Expand All @@ -41,8 +44,6 @@ export const Button: Story = {
.map((args: Args) =>
Default.render?.({ ...context.args, ...args, animated: false }, context),
)}
<div class="mt-32 w-100"></div>
${SignalColors.render?.({ ...context.args, ...SignalColors.args }, context)}
</div>
`,
)}
Expand Down
Loading

0 comments on commit 5bb0c39

Please sign in to comment.