mod-build 4.0.6 → 4.0.7

package/src/accessible-components/radio-button/_radio-button.scss

@@ -0,0 +1,586 @@
+$radio-overflow: visible !default;
+$radio-margin: 0 0 10px !default;
+
+$radio-button-label-cursor: pointer !default;
+$radio-button-label-display: block !default;
+$radio-button-input-position: absolute !default;
+$radio-button-input-opacity: 0 !default;
+
+// Default Styling (radioOptionType = none)
+$radio-button-background-color: $color-white !default;
+$radio-button-border-color: darken($color-charcoal3, 5%)!default;
+$radio-button-border-radius: 4px !default;
+$radio-button-border-width: 1px !default;
+$radio-button-color: $color-charcoal8 !default;
+$radio-button-font-size: 1rem !default;
+$radio-button-font-size-desktop: 1.125rem !default;
+$radio-button-font-weight: 400 !default;
+$radio-button-line-height: 1.25 !default;
+$radio-button-margin: 0 0 15px !default;
+$radio-button-min-height: 48px !default;
+$radio-button-padding: 17px 16px 17px 40px !default;
+$radio-button-text-align: left !default;
+// Checked
+$radio-button-checked-background-color: rgba($color-charcoal1, .4) !default;
+$radio-button-checked-border-color: $color-charcoal5 !default;
+$radio-button-checked-border-width: 2px !default;
+$radio-button-checked-box-shadow: none !default;
+$radio-button-checked-color: $radio-button-color !default;
+$radio-button-checked-font-weight: $radio-button-font-weight !default;
+// Focus
+$radio-button-focus-box-shadow: 0 0 10px 0 rgba(darken($radio-button-checked-background-color, 10%), .5) !default;
+// Hover
+$radio-button-hover-background-color: $radio-button-checked-background-color !default;
+$radio-button-hover-border-color: $radio-button-border-color !default;
+$radio-button-hover-border-width: $radio-button-border-width !default;
+$radio-button-hover-color: $radio-button-checked-color !default;
+// Error
+$radio-button-error-color: $color-a11y-red !default;
+
+// Radio Select (Circle)
+$radio-button-select-background-color: $color-white !default;
+$radio-button-select-border: 1px solid darken($color-charcoal3, 5%) !default;
+$radio-button-select-box-shadow: none !default;
+$radio-button-select-size: 20px !default;
+$radio-button-select-position-top: 17px !default;
+$radio-button-select-position-left: 13px !default;
+$radio-button-select-inner-circle-background-color: $color-charcoal5 !default;
+$radio-button-select-inner-circle-border-radius: 50% !default;
+$radio-button-select-inner-circle-color: transparent !default;
+$radio-button-select-inner-circle-content: '' !default;
+$radio-button-select-inner-circle-display: block !default;
+$radio-button-select-inner-circle-font-family: inherit !default;
+$radio-button-select-inner-circle-font-size: 0 !default;
+$radio-button-select-inner-circle-position: absolute !default;
+$radio-button-select-inner-circle-position-left: 3px !default;
+$radio-button-select-inner-circle-position-top: $radio-button-select-inner-circle-position-left !default;
+$radio-button-select-inner-circle-size: 10px !default;
+// Checked Radio Select (Circle)
+$radio-button-select-checked-background-color: $color-white !default;
+$radio-button-select-checked-border: 2px solid $color-charcoal5 !default;
+$radio-button-select-checked-box-shadow: none !default;
+
+$radio-border-transition: border-color .15s ease-in-out !default;
+
+// Radio Button (Text Spanning Multiple Lines)
+$radio-button-multiple-lines-text-max-width: 200px !default;
+$radio-button-multiple-lines-font-size: $radio-button-font-size !default;
+$radio-button-multiple-lines-font-size-desktop: $radio-button-font-size-desktop !default;
+
+// Radio Button (radioOptionType = 'group')
+$radio-group-border-color: $radio-button-border-color !default;
+$radio-group-border-width: 1px !default;
+$radio-group-border-radius: $radio-button-border-radius !default;
+$radio-group-box-shadow: none !default;
+$radio-group-gap: 0 !default;
+$radio-group-button-background-color: transparent !default;
+$radio-group-button-border-radius: 0 !default;
+$radio-group-button-font-size: 1rem !default;
+$radio-group-button-font-weight: normal !default;
+$radio-group-button-height: 70px !default;
+$radio-group-button-color: $radio-button-color !default;
+// Checked
+$radio-group-button-checked-background-color: $radio-button-checked-background-color !default;
+$radio-group-button-checked-border: 2px solid $radio-button-checked-border-color !default;
+$radio-group-button-checked-box-shadow: none !default;
+$radio-group-button-checked-font-weight: 700 !default;
+$radio-group-button-checked-color: $radio-group-button-color !default;
+// Hover
+$radio-group-button-hover-background-color: $radio-button-hover-background-color !default;
+$radio-group-button-hover-color: $radio-group-button-color !default;
+
+// Radio Button (radioOptionType = 'icon')
+$radio-icon-checked-border-color: $radio-button-checked-border-color !default;
+$radio-icon-border-radius: $radio-button-border-radius !default;
+$radio-icon-checked-border-width: $radio-button-checked-border-width !default;
+$radio-icon-height: 135px !default;
+$radio-icon-margin: 0 3px 10px 0 !default;
+$radio-icon-width: 32% !default;
+
+// Radio Button (radioOptionType = 'backgroundImage')
+$radio-background-color-checked-border-color: $radio-button-checked-border-color !default;
+$radio-background-color-border-radius: 5px !default;
+$radio-background-color-default-background-color: $color-charcoal4 !default;
+$radio-background-color-height: 77px !default;
+$radio-background-color-margin: 5px 4px !default;
+$radio-background-color-margin-desktop: 5px 4px 13px !default;
+$radio-background-color-width: calc(31% - 5px) !default;
+
+// Radio Button (radioOptionType = 'custom')
+$radio-custom-icon-background-color: $radio-button-checked-border-color !default;
+$radio-custom-icon-border-radius: 50% !default;
+$radio-custom-icon-color: $color-white !default;
+$radio-custom-icon-content: '\e920' !default;
+$radio-custom-icon-font-size: .875rem !default;
+$radio-custom-icon-initial-opacity: 0 !default;
+$radio-custom-icon-checked-opacity: 1 !default;
+$radio-custom-icon-position: absolute !default;
+$radio-custom-icon-position-left: 24px !default;
+$radio-custom-icon-size: 30px !default;
+$radio-custom-icon-text-align: center !default;
+$radio-custom-icon-text-shadow: none !default;
+$radio-custom-icon-checked-text-shadow: $radio-custom-icon-text-shadow !default;
+$radio-custom-margin: 0 0 15px !default;
+$radio-custom-min-height: 57px !default;
+$radio-custom-min-height-desktop: 67px !default;
+$radio-custom-padding: 5px 30px !default;
+$radio-custom-text-align: center !default;
+$radio-custom-label-justify-content: center !default;
+
+.radio {
+	margin: $radio-margin;
+	overflow: $radio-overflow;
+
+	&__button {
+		font-size: $radio-button-font-size;
+		margin: $radio-button-margin;
+		min-height: $radio-button-min-height;
+
+		label {
+			cursor: $radio-button-label-cursor;
+			display: $radio-button-label-display;
+			font-weight: $radio-button-font-weight;
+			line-height: $radio-button-line-height;
+			padding: $radio-button-padding;
+			position: relative;
+			text-align: $radio-button-text-align;
+
+			input[type=radio] {
+				position: $radio-button-input-position;
+				opacity: $radio-button-input-opacity;
+
+				+ span {
+					background-color: $radio-button-select-background-color;
+					border: $radio-button-select-border;
+					border-radius: 50%;
+					box-shadow: $radio-button-select-box-shadow;
+					display: block;
+					height: $radio-button-select-size;
+					left: $radio-button-select-position-left;
+					position: absolute;
+					top: $radio-button-select-position-top;
+					width: $radio-button-select-size;
+				}
+
+				&:checked + span { // sass-lint:disable-line
+					background-color: $radio-button-select-checked-background-color;
+					border: $radio-button-select-checked-border;
+					box-shadow: $radio-button-select-checked-box-shadow;
+
+					&:empty {
+						transition: $base-transition;
+					}
+
+					&:after {
+						background: $radio-button-select-inner-circle-background-color;
+						border-radius: $radio-button-select-inner-circle-border-radius;
+						color: $radio-button-select-inner-circle-color;
+						content: $radio-button-select-inner-circle-content;
+						display: $radio-button-select-inner-circle-display;
+						font-family: $radio-button-select-inner-circle-font-family;
+						font-size: $radio-button-select-inner-circle-font-size;
+						position: $radio-button-select-inner-circle-position;
+						height: $radio-button-select-inner-circle-size;
+						left: $radio-button-select-inner-circle-position-left;
+						top: $radio-button-select-inner-circle-position-top;
+						width: $radio-button-select-inner-circle-size;
+					}
+
+					+ span {
+						color: $radio-button-checked-color;
+						font-weight: $radio-button-checked-font-weight;
+
+						&::before {
+							background-color: $radio-button-checked-background-color;
+							border: $radio-button-checked-border-width solid $radio-button-checked-border-color;
+							box-shadow: $radio-button-checked-box-shadow;
+						}
+					}
+				}
+
+				&:focus {
+					+ span + span {
+						&::before {
+							box-shadow: $radio-button-focus-box-shadow;
+						}
+					}
+				}
+
+				&.multiple-lines {
+					+ .radio__button-text {
+						font-size: $radio-button-multiple-lines-font-size;
+						max-width: $radio-button-multiple-lines-text-max-width;
+					}
+				}
+			}
+
+			&:hover {
+				input:not(:checked) + span + .radio__button-text { // sass-lint:disable-line
+					color: $radio-button-hover-color;
+
+					&::before {
+						background-color: $radio-button-hover-background-color;
+						border: $radio-button-hover-border-width solid $radio-button-hover-border-color;
+					}
+				}
+			}
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	&__button-text {
+		color: $radio-button-color;
+		transition: $base-transition;
+
+		&::before {
+			background-color: $radio-button-background-color;
+			border: $radio-button-border-width solid $radio-button-border-color;
+			border-radius: $radio-button-border-radius;
+			content: '';
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			transition: $base-transition;
+			width: 100%;
+			z-index: -1;
+		}
+	}
+
+	&__group,
+	&--icon,
+	&--backgroundImage,
+	&--custom {
+		.radio__button {
+			label {
+				padding: 0;
+				text-align: $radio-custom-text-align;
+
+				input[type=radio] {
+					+ span {
+						background: none;
+						border: 0;
+						border-radius: 0;
+						box-shadow: none;
+						display: block;
+						height: auto;
+						left: 0;
+						position: unset;
+						text-align: $radio-custom-text-align;
+						top: unset;
+						width: auto;
+					}
+
+					&:checked {
+						+ span {
+							background: none;
+							border: 0;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&__group,
+	&--backgroundImage,
+	&--icon {
+		overflow: hidden;
+		user-select: none;
+
+		.radio__button {
+			border-radius: $radio-icon-border-radius;
+			display: inline-flex;
+			flex-direction: column;
+			justify-content: center;
+			margin: $radio-icon-margin;
+			position: relative;
+			text-align: center;
+			vertical-align: top;
+			width: $radio-icon-width;
+
+			label {
+				input[type=radio] {
+					+ span {
+						&::before,
+						&::after {
+							display: none;
+						}
+					}
+				}
+			}
+
+			.radio__buton-text {
+				&::before {
+					display: none;
+				}
+			}
+		}
+	}
+
+	&__group {
+		border: $radio-group-border-width solid $radio-group-border-color;
+		border-radius: $radio-group-border-radius;
+		box-shadow: $radio-group-box-shadow;
+		display: flex;
+		gap: $radio-group-gap;
+
+		.radio__button {
+			border: 0;
+			border-radius: 0;
+			height: $radio-group-button-height;
+			margin: 0;
+			width: 100%;
+
+			label {
+				height: 100%;
+				min-height: 0;
+
+				input[type=radio] {
+					+ span {
+						align-items: center;
+						background-color: $radio-group-button-background-color;
+						border-radius: $radio-group-button-border-radius;
+						color: $radio-group-button-color;
+						display: flex;
+						font-size: $radio-group-button-font-size;
+						font-weight: $radio-group-button-font-weight;
+						height: 100%;
+						justify-content: center;
+						transition: all .15s linear;
+					}
+
+					&:checked {
+						+ span {
+							background-color: $radio-group-button-checked-background-color;
+							border: $radio-group-button-checked-border;
+							box-shadow: $radio-group-button-checked-box-shadow;
+							color: $radio-group-button-checked-color;
+							font-weight: $radio-group-button-checked-font-weight;
+						}
+					}
+				}
+
+				&:hover {
+					input[type=radio]:not(:checked) + span { // sass-lint:disable-line
+						background-color: $radio-group-button-hover-background-color;
+						color: $radio-group-button-hover-color;
+					}
+				}
+			}
+
+			~ .radio__button {
+				border-left: $radio-group-border-width solid $radio-group-border-color;
+			}
+		}
+	}
+
+	&--icon {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.radio__button {
+			border: 0;
+			height: $radio-icon-height;
+			line-height: 12px;
+			position: relative;
+
+			label {
+				display: inline-flex;
+				flex-direction: column;
+				height: 100%;
+				justify-content: center;
+
+				input[type=radio]:checked + .tile .tile__text::before { // sass-lint:disable-line
+					border: $radio-icon-checked-border-width solid $radio-icon-checked-border-color;
+				}
+			}
+		}
+	}
+
+	&--backgroundImage {
+		padding: 0 1px;
+
+		.radio__button {
+			background-color: $radio-background-color-default-background-color;
+			border-radius: $radio-background-color-border-radius;
+			height: $radio-background-color-height;
+			margin: $radio-background-color-margin;
+			width: $radio-background-color-width;
+
+			input:checked {
+				+ .tile .tile__background-image {
+					&::before {
+						border-color: $radio-background-color-checked-border-color;
+					}
+				}
+			}
+
+			label {
+				align-items: center;
+				display: flex;
+				height: 100%;
+				justify-content: center;
+			}
+		}
+	}
+
+	&--custom {
+		.radio__button {
+			min-height: $radio-custom-min-height;
+
+			label {
+				align-items: center;
+				display: flex;
+				justify-content: $radio-custom-label-justify-content;
+				min-height: inherit;
+				padding: $radio-custom-padding;
+				position: relative;
+
+				input[type=radio] {
+					+ span {
+						color: $radio-button-color;
+						line-height: $radio-button-line-height;
+
+						&::before {
+							background-color: $radio-button-background-color;
+							border: $radio-button-border-width solid $radio-button-border-color;
+							border-radius: $radio-button-border-radius;
+							height: 100%;
+							left: 0;
+							opacity: 1;
+							position: absolute;
+							top: 0;
+							transition: $base-transition;
+							width: 100%;
+							z-index: -1;
+						}
+
+						&::after {
+							display: none;
+						}
+
+						+ span {
+							background-color: $radio-custom-icon-background-color;
+							border-radius: $radio-custom-icon-border-radius;
+							height: $radio-custom-icon-size;
+							left: $radio-custom-icon-position-left;
+							opacity: $radio-custom-icon-initial-opacity;
+							position: $radio-custom-icon-position;
+							text-align: $radio-custom-icon-text-align;
+							transition: $base-transition;
+							width: $radio-custom-icon-size;
+
+							&::before {
+								@include icon-fill;
+								background: transparent;
+								border: 0;
+								color: $radio-custom-icon-color;
+								content: $radio-custom-icon-content;
+								display: block;
+								font-size: $radio-custom-icon-font-size;
+								line-height: $radio-custom-icon-size;
+								text-shadow: $radio-custom-icon-text-shadow;
+								z-index: 2;
+							}
+						}
+					}
+
+					&:checked {
+						+ span {
+							color: $radio-button-checked-color;
+							font-weight: $radio-button-checked-font-weight;
+
+							&::before {
+								background-color: $radio-button-checked-background-color;
+								border: $radio-button-checked-border-width solid $radio-button-checked-border-color;
+							}
+
+							+ span {
+								opacity: $radio-custom-icon-checked-opacity;
+
+								&::before {
+									text-shadow: $radio-custom-icon-checked-text-shadow;
+								}
+							}
+						}
+					}
+
+					&:focus {
+						+ span {
+							&::before {
+								box-shadow: $radio-button-focus-box-shadow;
+							}
+
+							+ span {
+								&:before {
+									box-shadow: none;
+								}
+							}
+						}
+					}
+				}
+
+				&:hover {
+					input:not(:checked) + span {
+						color: $radio-button-hover-color;
+
+						&::before {
+							background-color: $radio-button-hover-background-color;
+							border: $radio-button-hover-border-width solid $radio-button-hover-border-color;
+						}
+
+						+ span {
+							opacity: 1;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.has-error, .has-error label:hover { // sass-lint:disable-line
+	input:not(:checked) + span + .radio__button-text { // sass-lint:disable-line
+		color: $radio-button-error-color;
+
+		&::before {
+			border-color: $radio-button-error-color;
+		}
+	}
+}
+
+@include breakpoint-md {
+	.radio {
+		&--custom {
+			.radio__button {
+				min-height: $radio-custom-min-height-desktop;
+			}
+		}
+
+		&--backgroundImage {
+			.radio__button {
+				margin: $radio-background-color-margin-desktop;
+			}
+		}
+
+		&__button {
+			font-size: $radio-button-font-size-desktop;
+
+			label {
+				input[type=radio] {
+					&.multiple-lines {
+						+ .radio__button-text {
+							font-size: $radio-button-multiple-lines-font-size-desktop;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+

package/src/accessible-components/radio-button/radio-button.html

@@ -0,0 +1,33 @@
+{{#if this.field}}
+<fieldset class="radio{{#if this.field.radioOptionType}} radio--{{this.field.radioOptionType}}{{/if}}{{#if this.field.attributes.class}} {{this.field.attributes.class}}{{/if}}" {{{addAttributes this.field 'class'}}}>
+	{{#if this.field.legend}}
+		<legend {{{addAttributes this.field.legend}}}>{{{this.field.legend.text}}}</legend>
+	{{/if}}
+	{{#xif "this.field.radioOptionType === 'group'"}}
+	<div class="radio__group">
+	{{/xif}}
+	{{#each this.field.options}}
+		<div class="radio__button{{#xif "this.wrapper && this.wrapper.attributes && this.wrapper.attributes.class"}} {{this.wrapper.attributes.class}}{{/xif}}" {{#if this.wrapper}}{{{addAttributes this.wrapper 'class'}}}{{/if}}>
+			<label class="radio__button-label">
+				<input type="radio" {{{addAttributes this 'id' 'type'}}} />
+				{{#unless ../this.field.radioOptionType}}
+					<span class="radio__button-select"></span>
+				{{/unless}}
+				{{#xif "this.backgroundImage || this.picture"}}
+					{{fileInclude 'src/accessible-components/tile/tile.html'
+						field = this
+					}}
+				{{else}}
+					<span class="radio__button-text">{{{this.text}}}</span>
+					{{#if ../this.field.radioOptionType}}
+						<span class="radio__custom-select"></span>
+					{{/if}}
+				{{/xif}}
+			</label>
+		</div>
+	{{/each}}
+	{{#xif "this.field.radioOptionType === 'group'"}}
+	</div>
+	{{/xif}}
+</fieldset>
+{{/if}}