-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #344 from Bixal/release/1.7.0
Release/1.7.0
- Loading branch information
Showing
27 changed files
with
1,007 additions
and
387 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
stories/assets/styles/utils/mixins/_alert-base-styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| @use "uswds-core" as *; | ||
|
|
||
| /// Applies shared base styles to alert and site alert components. | ||
| /// | ||
| /// @example | ||
| /// .bix-alert { | ||
| /// @include alert-base-styles; | ||
| /// } | ||
| /// | ||
| /// This mixin assumes the following structure: | ||
| /// - `.alert__heading` contains the heading text. | ||
| /// - `.alert__icon` contains the icon element. | ||
| /// - `.alert__text` contains the main text content. | ||
| @mixin alert-base-styles { | ||
| &__heading { | ||
| display: flex; | ||
| align-items: flex-start; | ||
| column-gap: units("05"); | ||
| font-family: var(--font-ui); | ||
| font-weight: 600; | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| &__icon { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| margin-left: calc(#{units(-4)} + #{units("05")}); // Offset column gap. | ||
| } | ||
|
|
||
| &__text > :last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| {# | ||
| /** | ||
| * Alert component. | ||
| * | ||
| * Available variables: | ||
| * - variant: String alert type: info, error, warning. | ||
| * - icon: String alert icon from USWDS: info, error, warning. | ||
| * - heading_type: Optional string for the type of header (h1-h6). | ||
| * - title: Optional string for the alert header. | ||
| * - text: A string of the alert body text. | ||
| **/ | ||
| #} | ||
|
|
||
|
|
||
| {% set heading_type = heading_type | default("h4") %} | ||
|
|
||
| {% if attributes is empty %} | ||
| {% set attributes = create_attribute() %} | ||
| {% endif %} | ||
|
|
||
| {% set alert_classes = [ | ||
| "bix-alert", | ||
| (variant ? "bix-alert--" ~ variant), | ||
| ] | merge(additional_classes | default([])) %} | ||
|
|
||
| <div{{ attributes.addClass(alert_classes) }}> | ||
| <div class="bix-alert__body"> | ||
|
|
||
|
|
||
| {% if title %} | ||
| <{{ heading_type }} class="bix-alert__heading"> | ||
| {% if icon %} | ||
| <span class="bix-alert__icon"> | ||
| {{ source(icon) }} | ||
| </span> | ||
| {% endif %} | ||
|
|
||
| {{ title }} | ||
| </{{ heading_type }}> | ||
| {% endif %} | ||
| {% if text %} | ||
| <div class="bix-alert__text"> | ||
| {{ text }} | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| @use "uswds-core" as *; | ||
| @use "../../assets/styles/utils/mixins/alert-base-styles" as *; | ||
|
|
||
| .bix-alert { | ||
| @include alert-base-styles; | ||
|
|
||
| --_alert-color: var(--alert-color, currentColor); | ||
|
|
||
| border-left: 4px solid var(--_alert-color); | ||
|
|
||
| &__body { | ||
| padding: units(1.5) units(2.5); | ||
| padding-left: units(5); | ||
| } | ||
| } | ||
|
|
||
| .bix-alert--info { | ||
| --alert-color: var(--c-info-darker); | ||
| } | ||
|
|
||
| .bix-alert--warning { | ||
| --alert-color: var(--c-warning); | ||
| } | ||
|
|
||
| .bix-alert--error { | ||
| --alert-color: var(--c-error); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import Alert from "./alert.html.twig"; | ||
| import "./alert.scss"; | ||
| import infoIcon from "@uswds/uswds/img/usa-icons/info_outline.svg"; | ||
| import warningIcon from "@uswds/uswds/img/usa-icons/warning.svg"; | ||
| import errorIcon from "@uswds/uswds/img/usa-icons/error_outline.svg"; | ||
|
|
||
| export default { | ||
| title: "Components/Alert", | ||
| tags: ["autodocs"], | ||
| component: Alert, | ||
| }; | ||
|
|
||
| const defaultContent = { | ||
| title: "Important Notice for Applicants", | ||
| text: ` | ||
| <p> | ||
| At Bixal, we want to ensure a transparent and secure application process for all candidates. Please note that: | ||
| </p> | ||
| <ul> | ||
| <li>Our recruiters will never request sensitive personal information (such as social security numbers or banking information).</li> | ||
| <li>Our messages will never include requests to download applications or attachments.</li> | ||
| <li>Legitimate recruitment communications will always include clear contact details and may reference our public job postings.</li> | ||
| </ul> | ||
| <p> | ||
| If you experience any challenges with your submission or need assistance in completing your application for accessibility purposes, please reach out to us. <strong><a href="mailto:[email protected]">We're here to help</a></strong>! | ||
| </p> | ||
| `, | ||
| }; | ||
|
|
||
| export const Default = { | ||
| args: { | ||
| heading_type: null, | ||
| ...defaultContent, | ||
| }, | ||
| }; | ||
|
|
||
| export const Info = { | ||
| args: { | ||
| ...defaultContent, | ||
| icon: infoIcon, | ||
| variant: "info", | ||
| }, | ||
| }; | ||
|
|
||
| export const Warning = { | ||
| args: { | ||
| ...defaultContent, | ||
| icon: warningIcon, | ||
| variant: "warning", | ||
| }, | ||
| }; | ||
|
|
||
| export const Error = { | ||
| args: { | ||
| ...defaultContent, | ||
| icon: errorIcon, | ||
| variant: "error", | ||
| }, | ||
| }; |
Oops, something went wrong.