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

Kds 1754 migrate toggle switch field guidance block scene to kaio #4062

Closed
wants to merge 17 commits into from
Closed

Kds 1754 migrate toggle switch field guidance block scene to kaio #4062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
bbf586f
Add ToggleSwitchField
JakePitman Sep 6, 2023
089761e
Migrate GuidanceBlock
JakePitman Sep 12, 2023
21349ba
Migrate Scene
JakePitman Sep 12, 2023
9543580
Comment out migrated components
JakePitman Sep 12, 2023
cd1fbae
Migrate responsive styles
JakePitman Sep 13, 2023
3c3c586
Fix mixins path and remove unnecessary button-reset mixin
JakePitman Sep 13, 2023
3f1ee89
Replace Box with div
JakePitman Sep 13, 2023
04eb588
Remove commented out components from index.ts
JakePitman Sep 13, 2023
8c07aa3
Update docs link for toggle field switch
JakePitman Sep 13, 2023
859bf47
Remove deprecated data-automation-id props from ToggleSwitch
JakePitman Sep 13, 2023
b81990c
Replace Box in Ill..Scene and fix GuidanceBlock padding
JakePitman Sep 13, 2023
d70714e
Replace Components/.. with KAIO-staging..
JakePitman Sep 13, 2023
4464520
Merge branch 'main' into KDS-1754-migrate-toggle-switch-field-guidanc…
Nov 5, 2023
77c728c
re-organise + cleanup ToggleSwitchField
Nov 6, 2023
06e9c2f
Merge branch 'main' into KDS-1754-migrate-toggle-switch-field-guidanc…
gyfchong Nov 6, 2023
3dfcb7b
remove ToggleSwitchField
Nov 6, 2023
e6ef939
Merge branch 'main' into KDS-1754-migrate-toggle-switch-field-guidanc…
gyfchong Nov 6, 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 packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
"react-day-picker": "8.4.1",
"react-focus-lock": "^2.9.6",
"react-focus-on": "^3.9.1",
"react-media": "^1.10.0",
"react-popper": "^2.3.0",
"react-select": "^5.7.7",
"react-textfit": "^1.1.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/Checkbox/Checkbox/_docs/Checkbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const meta = {
config: {
rules: [
{
// Built with no label on purpose, to be used within `RadioField` where label is present
// Built with no label on purpose, to be used within `CheckboxField` where label is present
id: "label",
enabled: false,
},
Expand Down
326 changes: 326 additions & 0 deletions packages/components/src/GuidanceBlock/GuidanceBlock.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,326 @@
@import "~@kaizen/design-tokens/sass/shadow";
@import "~@kaizen/design-tokens/sass/border";
@import "~@kaizen/design-tokens/sass/layout";
@import "~@kaizen/design-tokens/sass/color";
@import "~@kaizen/design-tokens/sass/animation";
@import "~@kaizen/design-tokens/sass/spacing";
@import "~@kaizen/component-library/styles/responsive";
JakePitman marked this conversation as resolved.
Show resolved Hide resolved
@import "~@kaizen/components/styles/button-reset";

$bannerPadding: $spacing-lg;
$ca-banner-fade-out: opacity $animation-duration-slow ease;
$ca-banner-collapse-height-delayed: margin-top $animation-duration-fast
$animation-duration-slow ease;
$illustration-size: 155px;
$scene-illustration-size: 300px;

.banner.noMaxWidth {
max-width: inherit;
}

.banner {
display: flex;
flex-direction: column;
gap: $spacing-sm;
background: $color-white;
min-width: 320px;
max-width: $layout-breakpoints-large;
border: $border-borderless-border-width $border-borderless-border-style
$border-borderless-border-color;
border-radius: $border-solid-border-radius;
padding: $bannerPadding;
box-shadow: $shadow-small-box-shadow;
position: relative;
top: -1px;
transition: $ca-banner-fade-out, $ca-banner-collapse-height-delayed;
color: $color-purple-800;

@include ca-media-desktop {
min-height: calc(12rem - calc(#{$bannerPadding} * 2));
flex-direction: row;
gap: $spacing-md;
width: auto;
align-items: center;
}

@include ca-media-mobile {
min-width: unset;
}
}

.illustrationWrapper {
display: flex;

@include ca-media-tablet {
text-align: center;
justify-content: center;
align-self: center;
padding: $spacing-sm;
}

@include ca-media-mobile {
display: none;
}
}

.illustration {
width: $illustration-size;
height: $illustration-size;

// This has been created to handle scene illustrations consistently until the tile component is created
.hasSceneIllustration & {
display: flex;
justify-content: center;
max-width: $scene-illustration-size;
max-height: $scene-illustration-size;
width: $scene-illustration-size;
height: auto;

figure {
max-height: 100%;
max-width: 100%;
aspect-ratio: 4/3;
}

img {
height: 100%;
object-fit: contain;
object-position: center;
}
}
}

.descriptionContainer {
flex: 1;
text-align: center;
align-self: center;
max-width: 780px;

@include ca-media-desktop {
padding: 0 $spacing-sm;
text-align: left;
}

@include ca-media-mobile {
margin: $spacing-sm;
max-width: 100%;
}

[dir="rtl"] & {
@include ca-media-desktop {
padding: 0 $spacing-sm;
text-align: right;
}
}
}

.descriptionAndActions {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
gap: $spacing-md;

@include ca-media-tablet-and-under {
flex-direction: column;
width: 100%;
align-items: unset;
}
}

.buttonContainer {
display: flex;
flex: 1 0 auto;
justify-content: center;
flex-direction: row-reverse;
gap: $spacing-sm;
min-width: max-content;

@include ca-media-tablet-and-up {
text-align: center;
}

@include ca-media-mobile {
flex-direction: column;
width: 100%;
margin-top: $spacing-xs;
}

[dir="rtl"] & svg {
transform: rotate(180deg);
}
}

.hidden {
opacity: 0%;
margin-bottom: 0;
}

.headingWrapper {
margin-bottom: $spacing-md;
}

.cancel {
@include button-reset;
JakePitman marked this conversation as resolved.
Show resolved Hide resolved

composes: interactiveIconWrapper from "~@kaizen/component-library/components/Icon/Icon.module.scss";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want to remove these cause they aren't the best supported feature in our bundling tools, and generally confusing.

Winter actually migrated these styles over to components/src/Notification/utils/_styles.scss

Maybe best to move the styles from Notification to components/styles so both components can extend them. I think you want to extend %ca-notification_cancel here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You want all styles from components/src/Notification/utils/_styles.scss moved over & shared? Or just %ca-notification__cancel?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, now that I take a second look, maybe they belong with Icon...? Icon/styles/_styles.scss, thoughts?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just realized slack isn't a great place for keeping info so re-sharing here to capture as food for thought when we loop back here in a health week:

Without having dug too deep into it, just looking at the functionality of the shared styles, it feels like we should try to use a component like IconButton instead of extending (or composing) a class. I'm assuming the older pattern of Guidance block and Menu may be a factor as to why this was done in the pas

position: absolute;
top: $spacing-sm;
right: $spacing-sm;
color: $color-purple-800;
}

.positive {
background: $color-green-100;
}

.negative {
background: $color-red-100;
}

.informative {
background: $color-blue-100;
}

.cautionary {
background: $color-yellow-100;
}

.assertive {
background: $color-orange-100;
}

.prominent {
background: $color-purple-100;
}

.inline,
.stacked {
flex-flow: row wrap;
align-items: unset;
gap: $spacing-md;
min-width: unset;

@include ca-media-tablet-and-under {
flex-direction: unset;
}

.illustrationWrapper {
margin-right: $spacing-sm;

[dir="rtl"] & {
margin-left: $spacing-sm;
margin-right: inherit;
}

@include ca-media-tablet {
padding: 0;
}

@include ca-media-mobile {
display: flex;
}
}

.descriptionAndActions {
margin: auto 0;
}

.descriptionContainer {
text-align: left;
max-width: unset;
min-width: 320px;

@include ca-media-desktop {
padding: 0;
}

@include ca-media-mobile {
margin: 0;
}

[dir="rtl"] & {
text-align: right;

@include ca-media-desktop {
padding: 0;
}
}
}

.buttonContainer {
padding-left: $spacing-sm;
justify-content: flex-start;
width: unset;
min-width: unset;

@include ca-media-mobile {
flex-direction: row-reverse;
}

[dir="rtl"] & {
padding-left: 0;
padding-right: $spacing-sm;
}

> * {
width: unset;
}
}

&.hasSceneIllustration {
justify-content: center;
}

&.centerContent {
flex-direction: column;

&.hasSceneIllustration .illustration {
width: 100%;
}

.illustrationWrapper {
margin: 0 auto;
align-self: center;
}

.descriptionContainer {
text-align: center;
min-width: unset;

[dir="rtl"] & {
text-align: center;
}
}

.buttonContainer {
padding: 0;
flex-direction: column;
min-width: unset;
justify-content: center;
}
}

&.centerContent.smallScreenTextAlignment {
.descriptionContainer {
text-align: left;

[dir="rtl"] & {
text-align: right;
}
}
}
}

/* stylelint-disable no-descending-specificity */
.stacked {
.descriptionAndActions {
flex-direction: column;
align-items: unset;
}

.descriptionContainer {
align-self: flex-start;
}
}
/* stylelint-enable no-descending-specificity */
Loading
Loading