Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(sbb-image): Round option #2356

Closed
wants to merge 1 commit into from
Closed

feat(sbb-image): Round option #2356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/components/image/image.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,11 @@
border-radius: 0;
}

// full radius
.image__figure--round .image__wrapper {
border-radius: 100%;
}

// Variant: Hero Teaser
.image__figure--teaser-hero .image__wrapper {
aspect-ratio: 1 / 1;
Expand Down
7 changes: 7 additions & 0 deletions src/components/image/image.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@ const noBorderRadius: InputType = {
},
};

const round: InputType = {
control: {
type: 'boolean',
},
};

const aspectRatio: InputType = {
control: { type: 'select' },
options: ['free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16', '16-9'],
Expand Down Expand Up @@ -124,6 +130,7 @@ const defaultArgTypes: ArgTypes = {
alt: {},
caption: {},
'no-border-radius': noBorderRadius,
'round': round,
'aspect-ratio': aspectRatio,
copyright,
'copyright-holder': copyrightHolder,
Expand Down
6 changes: 6 additions & 0 deletions src/components/image/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,11 @@ export class SbbImageElement extends LitElement {
*/
@property({ attribute: 'no-border-radius', type: Boolean }) public noBorderRadius = false;

/**
* Whether to have a border-radius on the image that makes it fully round
*/
@property({ attribute: 'round', type: Boolean }) public round = false;

/**
* Set an aspect ratio
* default is '16-9' (16/9)
Expand Down Expand Up @@ -463,6 +468,7 @@ export class SbbImageElement extends LitElement {
image__figure: true,
[`image__figure--teaser-hero`]: this._variantTeaserHero,
[`image__figure--no-radius`]: this.noBorderRadius || this._variantTeaserHero,
[`image__figure--round`]: this.round,
[`image__figure--ratio-${this.aspectRatio}`]: true,
[`image__figure--loaded`]: this._loaded,
})}
Expand Down
2 changes: 1 addition & 1 deletion src/components/image/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,6 @@ The size can be set with `pictureSizesConfig`.
| `loading` | `loading` | public | `InterfaceImageAttributes['loading']` | `'eager'` | With the support of native image lazy loading, we can now decide whether we want to load the image immediately or only once it is close to the visible viewport. The value eager is best used for images within the initial viewport. We want to load these images as fast as possible to improve the Core Web Vitals values. lazy on the other hand works best for images which are further down the page or invisible during the loading of the initial viewport. |
| `performanceMark` | `performance-mark` | public | `string \| undefined` | | With performance.mark you can log a timestamp associated with the name you define in performanceMark when a certain event is happening. In our case we will log the performance.mark into the PerformanceEntry API once the image is fully loaded. Performance monitoring tools like SpeedCurve or Lighthouse are then able to grab these entries from the PerformanceEntry API and give us additional information and insights about our page loading behaviour. We are then also able to monitor these values over a long period to see if our performance increases or decreases over time. Best to use lowercase strings here, separate words with underscores or dashes. |
| `pictureSizesConfig` | `picture-sizes-config` | public | `string \| undefined` | | With the pictureSizesConfig object, you can pass in information into image about what kind of source elements should get rendered. mediaQueries accepts multiple Media Query entries which can get combined by defining a conditionOperator. Type is: stringified InterfaceImageAttributesSizesConfig-Object An example could look like this: { "breakpoints": \[ { "image": { "height": "675", "width": "1200" }, "mediaQueries": \[ { "conditionFeature": "min-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-large-min" }, "conditionOperator": false } ] }, { "image": { "height": "549", "width": "976" }, "mediaQueries": \[ { "conditionFeature": "min-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-small-min" }, "conditionOperator": false } ] }, { "image": { "height": "180", "width": "320" }, "mediaQueries": \[ { "conditionFeature": "max-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-micro-max" }, "conditionOperator": "and" }, { "conditionFeature": "orientation", "conditionFeatureValue": { "lyneDesignToken": false, "value": "landscape" }, "conditionOperator": false } ] } ] } |
| `noBorderRadius` | `no-border-radius` | public | `boolean` | `false` | Whether to have no border-radius on the image |
| `noBorderRadius` | `no-border-radius` | public | `boolean` | `false` | Whether to have no border-radius on the image | `round` | `round` | public | `string` | `undefined` | Whether to make the image fully round |
| `aspectRatio` | `aspect-ratio` | public | `InterfaceImageAttributes['aspectRatio']` | `'16-9'` | Set an aspect ratio default is '16-9' (16/9) other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16' |
| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the fade animation from blurred to real image should be disabled. |
Loading