Skip to content

Commit

Permalink
feat(styles): created a new storie space for the legend [ci visual]
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexhristov14 @InnaAtanasova
alexhristov14 authored and InnaAtanasova committed Nov 14, 2024
1 parent d3ba673 commit ec67241
Show file tree
Hide file tree
Showing 4 changed files with 961 additions and 62 deletions.
100 changes: 61 additions & 39 deletions packages/styles/src/calendar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,15 @@ $fd-calendar-special-days: (
'20': var(--sapLegendColor20)
);

@mixin legendTextBase() {
@mixin fd-legend-text-base() {
color: var(--sapContent_LabelColor);
font-family: var(--sapFontFamily);
font-size: var(--sapFontSmallSize);
font-weight: normal;
padding: 0.3125rem;
background: var(--sapList_Background);
padding-inline: 0.3125rem;
padding-block: 0.3125rem;
// background: var(--sapList_Background);
column-gap: 0.5rem;
cursor: default;
}
Expand Down Expand Up @@ -422,59 +424,79 @@ $fd-calendar-special-days: (
@include fd-reset();

display: flex;

&--legend {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
grid-gap: 0.5rem;
margin-top: 0.5rem;
}
}

&--legend__item {
// LEGEND SECTION
&__legend {
@include fd-flex();

align-items: center;

&--circle {
@include fd-square(1rem);
flex-wrap: wrap;
gap: 0.5rem;
max-width: 18rem;

&--col {
@include fd-flex(column);

display: inline-block;
border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
border-radius: 0.563rem;
background-color: none;
align-items: flex-start;
max-width: 7.5rem;
}


&--square {
@include fd-square(0.875rem);
&-item {
@include fd-inline-flex-center();

border: 0.0625rem solid var(--sapContent_ForegroundBorderColor); // 0.125rem if not ForegroundBorderColor
border-radius: 0.125rem;
background-color: none;
margin: 0;
padding: var(--sapContent_FocusWidth);

@include fd-focus() {
padding: 0.125rem;
border-radius: 0.25rem;
outline: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
}

margin-block: 0.25rem;
margin-inline-start: 0.25rem;
margin-inline-end: 0.5rem;
}

&--text {
@include legendTextBase();
&-marker{
@include fd-square(0.875rem);

&-description {
@include legendTextBase();
border: 0.0625rem solid var(--sapContent_ForegroundBorderColor); // 0.125rem if not ForegroundBorderColor
border-radius: 0.125rem;
background-color: none;
margin-inline: 0;
margin-block: 0;

position: absolute;
vertical-align: middle;
white-space: pre-line;
text-overflow: ellipsis;
overflow: hidden;
padding-top: 0;
&--circle {
@include fd-square(1rem);

display: inline-block;
border-radius: 0.563rem;
}
}

&-text {
@include fd-legend-text-base();
}

@include fd-focus(){
padding: 0.125rem;
border-radius: 0.25rem;
outline: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
&-description {
@include fd-legend-text-base();

@mixin fd-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

vertical-align: middle;
white-space: pre-line;
padding-top: 0;
}
}

&-text-and-description {
@include fd-flex(column);
}
}

&__text {
@include fd-reset();
Expand Down
22 changes: 15 additions & 7 deletions packages/styles/stories/Components/calendar/calendar.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import calExampleHtml from "./cal.html?raw";
import yearsExampleHtml from "./years.example.html?raw";
import monthsExampleHtml from "./months.example.html?raw";
import daysExampleHtml from "./days.example.html?raw";
import legendExampleHtml from "./legend.example.html?raw";
import '../../../src/bar.scss';
import '../../../src/dialog.scss';
import '../../../src/tile.scss';
Expand Down Expand Up @@ -96,17 +97,15 @@ These modifier classes are used to style various states of calendar grid element
| \`is-hover\` | Style hovered calendar elements
| \`is-disabled\` | Style disabled calendar elements
### Legend
These modifier classes are used to style calendar grid elements with colors.\n
| Modifier class | Use to... |
| -------------:| :-------------- |
| \`fd-calendar__row--legend\` | Create a row space for legend items
| \`fd-calendar--legend__item\` | Create a legend container
| \` fd-calendar--legend__item--circle\` | Makes the legend item representation a circle
| \` fd-calendar--legend__item--square\` | Makes the legend item representation a square
| \` fd-calendar--legend__item--text\` | Adds a descriptive title to the legend item
| \` fd-calendar--legend__item--text-description\` | Adds any additional information to the legend item
| \`fd-calendar__legend-item\` | Create a legend container
| \`fd-calendar__legend-marker\` | Create a legend marker (square by default)
| \` fd-calendar__legend-marker--circle\` | Modify the legend marker to a circle
| \` fd-calendar__legend-text\` | Create a legend title text
| \` fd-calendar__legend-description\` | Create a legend description text
### Special days
The classes \`fd-calendar__item--legend-1\` ... \`fd-calendar__item--legend-20\` are used to style calendar grid elements with colors, which are identified by numeric modifier classes.\n
Expand Down Expand Up @@ -144,4 +143,13 @@ Years.parameters = {
story: 'The calendar component can display a range of years in various ways: short-term, long-term, year ranges etc. Add the `fd-calendar__content--years` class to the container element, and adjust the number of columns, rows, and content to fit your use case.'
}
}
};

export const Legend = () => legendExampleHtml;
Legend.parameters = {
docs: {
description: {
story: 'The calendar component can display a customizable legend to help users understand the meaning of different colors or styles used in the calendar. Add the `fd-calendar__legend` class to a child container and then add the `fd-calendar__legend-item` class to each legend item.'
}
}
};
Loading

0 comments on commit ec67241

Please sign in to comment.