Skip to content

Commit

Permalink
feat(sbb-image): introduce support for round variant (#2401)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: property `noBorderRadius` has been replaced by `borderRadius` which can receive 'default', 'none' and 'round'.
  • Loading branch information
@jeripeierSBB
jeripeierSBB committed Feb 14, 2024
1 parent 9009807 commit 971bd5c
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 9 deletions.
5 changes: 5 additions & 0 deletions src/components/image/image.scss
View file
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: var(--sbb-border-radius-infinity);
}

// Variant: Hero Teaser
.image__figure--teaser-hero .image__wrapper {
aspect-ratio: 1 / 1;
Expand Down
21 changes: 16 additions & 5 deletions src/components/image/image.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,11 @@ const imageSrc: InputType = {
options: images,
};

const noBorderRadius: InputType = {
const borderRadius: InputType = {
control: {
type: 'boolean',
type: 'select',
},
options: ['default', 'none', 'round'],
};

const aspectRatio: InputType = {
Expand Down Expand Up @@ -123,7 +124,7 @@ const disableAnimation: InputType = {
const defaultArgTypes: ArgTypes = {
alt: {},
caption: {},
'no-border-radius': noBorderRadius,
'border-radius': borderRadius,
'aspect-ratio': aspectRatio,
copyright,
'copyright-holder': copyrightHolder,
Expand All @@ -142,7 +143,7 @@ const defaultArgs: Args = {
alt: '',
caption: undefined,
// we need a string and not boolean, otherwise storybook add/remove the attribute but don't write the value
'no-border-radius': false,
'border-radius': 'default',
'aspect-ratio': aspectRatio.options[0],
copyright: '',
'copyright-holder': copyrightHolder.options[0],
Expand Down Expand Up @@ -181,7 +182,17 @@ export const NoCaptionNoRadius: StoryObj = {
argTypes: defaultArgTypes,
args: {
...defaultArgs,
'no-border-radius': true,
'border-radius': 'none',
},
};

export const RoundBorderRadius: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: {
...defaultArgs,
'border-radius': 'round',
'aspect-ratio': '1-1',
},
};

Expand Down
8 changes: 5 additions & 3 deletions src/components/image/image.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,9 +267,10 @@ export class SbbImageElement extends LitElement {
@property({ attribute: 'picture-sizes-config' }) public pictureSizesConfig?: string;

/**
* Whether to have no border-radius on the image
* Border radius of the image. Choose between a default radius, no radius and a completely round image.
*/
@property({ attribute: 'no-border-radius', type: Boolean }) public noBorderRadius = false;
@property({ attribute: 'border-radius' }) public borderRadius: 'default' | 'none' | 'round' =
'default';

/**
* Set an aspect ratio
Expand Down Expand Up @@ -465,7 +466,8 @@ export class SbbImageElement extends LitElement {
class=${classMap({
image__figure: true,
[`image__figure--teaser-hero`]: this._variantTeaserHero,
[`image__figure--no-radius`]: this.noBorderRadius || this._variantTeaserHero,
[`image__figure--no-radius`]: this.borderRadius === 'none' || this._variantTeaserHero,
[`image__figure--round`]: this.borderRadius === 'round' && !this._variantTeaserHero,
[`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
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 |
| `borderRadius` | `border-radius` | public | `'default' \| 'none' \| 'round'` | `'default'` | Border radius of the image. Choose between a default radius, no radius and a completely round image. |
| `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. |

0 comments on commit 971bd5c

Please sign in to comment.