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

Jump to bottom

Pail 21 tooltip #291

Merged
merged 10 commits into from
Oct 2, 2023
Merged

Pail 21 tooltip #291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4f1e087
create table with existing code
marcelpirnay Sep 15, 2023
19ae7e3
finishing table
marcelpirnay Sep 18, 2023
893af8a
add compnent to list + small tag
marcelpirnay Sep 19, 2023
5d0be06
adding   & overflow-x: scroll
marcelpirnay Sep 20, 2023
9f8b30d
fix spaces and bckg
marcelpirnay Sep 20, 2023
c75eee7
re- reorganise tables + equation (a,b)
mars2601 Sep 21, 2023
b6f46a2
Move c-display from app style -> to styleguide style (different css f…
marcelpirnay Sep 26, 2023
d658719
ajout du filtre par année dans le main-title
marcelpirnay Sep 26, 2023
127c871
add css class to tooltip and add an example in a form in /components/…
marcelpirnay Sep 28, 2023
b8c2514
Change c-tooltip-cin to display: inline-block
mars2601 Oct 2, 2023
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
1 change: 1 addition & 0 deletions content/scss/_c-app-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Component: app layout

.c-app-layout-inner {
height: 100%;
overflow-x: auto;

@media (max-width: ($g-bp2 - 1px)) {
// Make full screen scrollable on mobile, mobile navigation pattern needs to be revised in the future
Expand Down
11 changes: 8 additions & 3 deletions content/scss/_c-content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@
c-content
---
Usage: wrap a .c-content class around content to turn it into rich text.

.c-h1, .c-h2, .c-body-1, c-body 2
This is used in production app.
---
Usage: use these classes to style individual components like their rich text equivalent
Usage: This is used in production app.
========================================================================== */

.c-h1, .c-h2, .c-h3, .c-h4,
Expand Down Expand Up @@ -90,6 +89,12 @@
line-height: 1.65em;
}

small {
font-size: 1.3rem;
margin: 1.6rem 0;
line-height: 1.72;
}

dl {
border: 1px solid $color-gray-100;
border-radius: .3rem;
Expand Down
13 changes: 4 additions & 9 deletions content/scss/_c-display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
/* ==========================================================================
c-display
---

Usage: wrap a .c-display class around content to turn it into rich text.
Similar to .c-content, but meant for a reading context.
Similar to .c-content, but meant for styleguide website only.
Do not use c-display in production app.

========================================================================== */

Expand Down Expand Up @@ -80,14 +82,7 @@

p {
margin: 1.8rem 0;
}

small {
font-size: 1.6rem;
margin: 1.6rem 0;
line-height: 1.72;
}

}

.c-sidenote {
color: $color-semantic-muted-text;
Expand Down
46 changes: 43 additions & 3 deletions content/scss/_c-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,15 @@ $c-table-border-radius: $g-border-radius-medium !default;
}

thead th {
border-right: 2px;
border-style: solid;
border-color: $color-gray-50;
&:first-child{
border-top-left-radius: $g-border-radius-small;
}
&:last-child{
border-top-right-radius: $g-border-radius-small;
border-right: 0;
}
}

Expand All @@ -86,7 +90,33 @@ $c-table-border-radius: $g-border-radius-medium !default;
}

td {
border-bottom: 0.1rem solid $c-table-border-color;
border-right: 2px;
border-style: solid;
border-color: $color-gray-50;
border-bottom: 2px solid $c-table-border-color;
&.border-top-left-r{
border-top-left-radius: $g-border-radius-small;
}
&.border-bottom-left-r{
border-bottom-left-radius: $g-border-radius-small;
}
&:last-child{
border-right: 0;
}
}

thead tr{
background-color: transparent;
th{
background-color: white;
}
td.disabled, th.disabled{
border: none;
background-color: transparent;
&+th{
border-top-left-radius: $g-border-radius-small;
}
}
}

tr:last-child {
Expand All @@ -95,10 +125,21 @@ $c-table-border-radius: $g-border-radius-medium !default;
}
}

.dotted{
border-right: none;
border-right: 2px dashed white;
}
.dotted-bottom{
border-bottom: none;
border-bottom: 2px dashed white;
}



td,
th {
text-align: left;
padding: 1.2rem 1.6rem;
padding: 1.2rem 1rem;
position: relative;
}

Expand Down Expand Up @@ -193,7 +234,6 @@ $c-table-border-radius: $g-border-radius-medium !default;

/* Invisible table structure
========================================================================== */

.c-table.c-table--invisible {
border: 0;
width: 100%;
Expand Down
6 changes: 5 additions & 1 deletion content/scss/_c-tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
/* Variables
========================================================================== */

$c-tooltip-bg: rgba(0,0,0,0.65) !default;
$c-tooltip-bg: rgba(0,0,0,0.75) !default;

/* Component
========================================================================== */
Expand All @@ -19,8 +19,12 @@ $c-tooltip-bg: rgba(0,0,0,0.65) !default;
border-radius: 0.4rem;
max-width: 24rem;
z-index: 1;
&-icon{
display: inline-block;
}
}


.c-tooltip--size-m {
min-width: 24rem;
}
Expand Down
7 changes: 6 additions & 1 deletion content/scss/_o-form-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ $o-form-group-label-font-weight: 500 !default;
Group within a form that defines a layout
========================================================================== */



.o-form-group-layout--standard {

.o-form-group {
Expand All @@ -34,9 +36,12 @@ $o-form-group-label-font-weight: 500 !default;
font-weight: $o-form-group-label-font-weight;
display: block;
flex: none;
.c-tooltip-icon{
margin-left: .4rem;
}
}

.o-form-group__label--with-helper {
label.o-form-group__label--with-helper {
display: flex;
align-items: center;
}
Expand Down
13 changes: 13 additions & 0 deletions content/scss/_u-generic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,4 +188,17 @@
.c-app-layout-inner__content{
margin-top: 10.2rem;
}
}

// Generic backgrund
.bckg-gray{
background-color: $color-gray-25 !important;
}

.bckg-gray-50{
background-color: $color-gray-50 !important;
}

.bckg-yellow{
background-color: $color-yellow-150 !important;
}
1 change: 0 additions & 1 deletion content/scss/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@
========================================================================== */

@import "_c-content";
@import "_c-display";
@import "_c-content-display";
@import "_c-video-wrapper";
@import "_c-figure";
Expand Down
2 changes: 2 additions & 0 deletions content/scss/styleguide-customizations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
// @import "_c-error-page";
@import "_c-icon-list";

@import "_c-display";

/* ==========================================================================
Style guide styles
========================================================================== */
Expand Down
0 .../_components/aov-typography/app-style.pug → .../aov-typography/App-style-(c_content).pug
View file
Open in desktop
File renamed without changes.
0 ...ponents/aov-typography/document-style.pug → ...pography/Styleguide-style-(c_display).pug
View file
Open in desktop
File renamed without changes.
72 changes: 53 additions & 19 deletions content/templates/_components/c-table/02-c-table-styled.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,53 @@
table.c-table.c-table--styled
thead
tr
th Data
th Data
th Data
tbody
tr
td Data
td Data
td Data
tr
td Data
td Data
td Data
tr
td Data
td Data
td Data
div.bckg-gray-50.u-padding-l
table.c-table.c-table--styled.c-table--bordered.js-data-table
thead
tr
th(rowspan="2" class="disabled") Activité: ABC
+c-badge({skin: 'help'})(data-tooltip="tooltip-1" data-tooltip-placement="right")
.c-tooltip#tooltip-1(role="tooltip")
| Informations sur l'activité en question
.c-tooltip__arrow(data-popper-arrow)
th(rowspan="2") Lorem
th(rowspan="2").u-text-center Lorem Ipsum Dolor
th(colspan="4").u-text-center.dotted-bottom Lorem Ipsum Dolor
tr
th.u-text-center.dotted Lorem Ipsum
th.u-text-center Total

tbody
tr
td(rowspan="3").border-top-left-r Lorem Ipsum
td
+c-status-pill({skin: 'success'}) Success
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 30%
td.u-text-center 1000<small>,00 €</small>
tr.bckg-gray
td
+c-status-pill({skin: 'pending'}) Pending
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 30%
td.u-text-center 1000,<small>00&nbsp;€</small>
tr.bckg-yellow
td Total
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 30%
td.u-text-center 1000,<small>00&nbsp;€</small>
tr
td(rowspan="3").border-bottom-left-r Lorem Ipsum
td
+c-status-pill({skin: 'success'}) Success
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 30%
td.u-text-center 1000,<small>00&nbsp;€</small>
tr.bckg-gray
td
+c-status-pill({skin: 'pending'}) Pending
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 30%
td.u-text-center 1000,<small>00&nbsp;€</small>
tr.bckg-yellow
td Total
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 30%
td.u-text-center 1000,<small>00&nbsp;€</small>
7 changes: 7 additions & 0 deletions content/templates/_components/c-tooltip/05-c-tooltip-icon.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
div(style="padding-bottom: 3.2rem;")
span(class="c-tooltip-icon" data-tooltip="tooltip-5" data-tooltip-placement="top")
+icon('circle-help')
.c-tooltip#tooltip-5(role="tooltip")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.c-tooltip__arrow(data-popper-arrow)

14 changes: 14 additions & 0 deletions content/templates/_components/c-tooltip/06-c-tooltip-icon-in-a-form.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
div(style="padding-bottom: 3.2rem;")
.o-form-group-layout.o-form-group-layout--standard
.o-form-group
label.o-form-group__label.o-form-group__label--with-helper(for="defaultFormNameId")
| Name
span(class="c-tooltip-icon" data-tooltip="tooltip-6" data-tooltip-placement="top")
+icon('circle-help')
.c-tooltip#tooltip-6(role="tooltip")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.c-tooltip__arrow(data-popper-arrow)
.o-form-group__controls
input.c-input(type="email" value="John Doe" id="defaultFormNameId")


Loading