diff --git a/src/components/usa-alert/alert.stories.js b/src/components/usa-alert/alert.stories.js new file mode 100644 index 00000000..50330f88 --- /dev/null +++ b/src/components/usa-alert/alert.stories.js @@ -0,0 +1,64 @@ +import "./index.ts"; +import { html, nothing } from "lit"; + +const meta = { + title: "Components/Alert", + component: "usa-alert", + render: ({ heading, type, content, noIcon }) => { + return html` + + ${heading ? html`

${heading}

` : nothing} +

+ + `; + }, +}; + +export default meta; + +export const InformationalAlert = { + args: { + heading: "Informational Alert", + type: "info", + content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.`, + }, +}; + +export const WarningAlert = { + args: { + heading: "Warning Alert", + type: "warning", + content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.`, + }, +}; + +export const SuccessAlert = { + args: { + heading: "Success Alert", + type: "success", + content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.`, + }, +}; + +export const ErrorAlert = { + args: { + heading: "Error Alert", + type: "error", + content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.`, + }, +}; + +export const SlimAlert = { + args: { + type: "info", + content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.`, + }, +}; + +export const AlertWithNoIcon = { + args: { + type: "info", + content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.`, + noIcon: "true", + }, +}; diff --git a/src/components/usa-alert/base-variables.css b/src/components/usa-alert/base-variables.css new file mode 100644 index 00000000..f8caeaa6 --- /dev/null +++ b/src/components/usa-alert/base-variables.css @@ -0,0 +1,496 @@ +:root, +:host { + --usa-color-black-transparent-5: rgb(0 0 0 / 1%); + --usa-color-black-transparent-10: rgb(0 0 0 / 10%); + --usa-color-black-transparent-20: rgb(0 0 0 / 20%); + --usa-color-black-transparent-30: rgb(0 0 0 / 30%); + --usa-color-black-transparent-40: rgb(0 0 0 / 40%); + --usa-color-black-transparent-50: rgb(0 0 0 / 50%); + --usa-color-black-transparent-60: rgb(0 0 0 / 60%); + --usa-color-black-transparent-70: rgb(0 0 0 / 70%); + --usa-color-black-transparent-80: rgb(0 0 0 / 80%); + --usa-color-black-transparent-90: rgb(0 0 0 / 90%); + --usa-color-blue-cool-5: #e7f2f5; + --usa-color-blue-cool-10: #dae9ee; + --usa-color-blue-cool-20: #adcfdc; + --usa-color-blue-cool-30: #82b4c9; + --usa-color-blue-cool-40: #6499af; + --usa-color-blue-cool-50: #3a7d95; + --usa-color-blue-cool-60: #2e6276; + --usa-color-blue-cool-70: #224a58; + --usa-color-blue-cool-80: #14333d; + --usa-color-blue-cool-90: #0f191c; + --usa-color-blue-cool-vivid-5: #e1f3f8; + --usa-color-blue-cool-vivid-10: #c3ebfa; + --usa-color-blue-cool-vivid-20: #97d4ea; + --usa-color-blue-cool-vivid-30: #59b9de; + --usa-color-blue-cool-vivid-40: #28a0cb; + --usa-color-blue-cool-vivid-50: #0d7ea2; + --usa-color-blue-cool-vivid-60: #07648d; + --usa-color-blue-cool-vivid-70: #074b69; + --usa-color-blue-cool-vivid-80: #002d3f; + --usa-color-blue-warm-5: #ecf1f7; + --usa-color-blue-warm-10: #e1e7f1; + --usa-color-blue-warm-20: #bbcae4; + --usa-color-blue-warm-30: #98afd2; + --usa-color-blue-warm-40: #7292c7; + --usa-color-blue-warm-50: #4a77b4; + --usa-color-blue-warm-60: #345d96; + --usa-color-blue-warm-70: #2f4668; + --usa-color-blue-warm-80: #252f3e; + --usa-color-blue-warm-90: #13171f; + --usa-color-blue-warm-vivid-5: #edf5ff; + --usa-color-blue-warm-vivid-10: #d4e5ff; + --usa-color-blue-warm-vivid-20: #adcdff; + --usa-color-blue-warm-vivid-30: #81aefc; + --usa-color-blue-warm-vivid-40: #5994f6; + --usa-color-blue-warm-vivid-50: #2672de; + --usa-color-blue-warm-vivid-60: #0050d8; + --usa-color-blue-warm-vivid-70: #1a4480; + --usa-color-blue-warm-vivid-80: #162e51; + --usa-color-blue-5: #eff6fb; + --usa-color-blue-10: #d9e8f6; + --usa-color-blue-20: #aacdec; + --usa-color-blue-30: #73b3e7; + --usa-color-blue-40: #4f97d1; + --usa-color-blue-50: #2378c3; + --usa-color-blue-60: #2c608a; + --usa-color-blue-70: #274863; + --usa-color-blue-80: #1f303e; + --usa-color-blue-90: #11181d; + --usa-color-blue-vivid-5: #e8f5ff; + --usa-color-blue-vivid-10: #cfe8ff; + --usa-color-blue-vivid-20: #a1d3ff; + --usa-color-blue-vivid-30: #58b4ff; + --usa-color-blue-vivid-40: #2491ff; + --usa-color-blue-vivid-50: #0076d6; + --usa-color-blue-vivid-60: #005ea2; + --usa-color-blue-vivid-70: #0b4778; + --usa-color-blue-vivid-80: #112f4e; + --usa-color-cyan-5: #e7f6f8; + --usa-color-cyan-10: #ccecf2; + --usa-color-cyan-20: #99deea; + --usa-color-cyan-30: #5dc0d1; + --usa-color-cyan-40: #449dac; + --usa-color-cyan-50: #168092; + --usa-color-cyan-60: #2a646d; + --usa-color-cyan-70: #2c4a4e; + --usa-color-cyan-80: #203133; + --usa-color-cyan-90: #111819; + --usa-color-cyan-vivid-5: #e5faff; + --usa-color-cyan-vivid-10: #a8f2ff; + --usa-color-cyan-vivid-20: #52daf2; + --usa-color-cyan-vivid-30: #00bde3; + --usa-color-cyan-vivid-40: #009ec1; + --usa-color-cyan-vivid-50: #0081a1; + --usa-color-cyan-vivid-60: #00687d; + --usa-color-cyan-vivid-70: #0e4f5c; + --usa-color-cyan-vivid-80: #093b44; + --usa-color-transparent: rgb(0 0 0 / 0%); + --usa-color-black: #000; + --usa-color-white: #fff; + --usa-color-gold-5: #f5f0e6; + --usa-color-gold-10: #f1e5cd; + --usa-color-gold-20: #dec69a; + --usa-color-gold-30: #c7a97b; + --usa-color-gold-40: #ad8b65; + --usa-color-gold-50: #8e704f; + --usa-color-gold-60: #6b5947; + --usa-color-gold-70: #4d4438; + --usa-color-gold-80: #322d26; + --usa-color-gold-90: #191714; + --usa-color-gold-vivid-5: #fef0c8; + --usa-color-gold-vivid-10: #ffe396; + --usa-color-gold-vivid-20: #ffbe2e; + --usa-color-gold-vivid-30: #e5a000; + --usa-color-gold-vivid-40: #c2850c; + --usa-color-gold-vivid-50: #936f38; + --usa-color-gold-vivid-60: #7a591a; + --usa-color-gold-vivid-70: #5c410a; + --usa-color-gold-vivid-80: #3b2b15; + --usa-color-gray-cool-1: #fbfcfd; + --usa-color-gray-cool-2: #f7f9fa; + --usa-color-gray-cool-3: #f5f6f7; + --usa-color-gray-cool-4: #f1f3f6; + --usa-color-gray-cool-5: #edeff0; + --usa-color-gray-cool-10: #dfe1e2; + --usa-color-gray-cool-20: #c6cace; + --usa-color-gray-cool-30: #a9aeb1; + --usa-color-gray-cool-40: #8d9297; + --usa-color-gray-cool-50: #71767a; + --usa-color-gray-cool-60: #565c65; + --usa-color-gray-cool-70: #3d4551; + --usa-color-gray-cool-80: #2d2e2f; + --usa-color-gray-cool-90: #1c1d1f; + --usa-color-gray-warm-1: #fcfcfb; + --usa-color-gray-warm-2: #f9f9f7; + --usa-color-gray-warm-3: #f6f6f2; + --usa-color-gray-warm-4: #f5f5f0; + --usa-color-gray-warm-5: #f0f0ec; + --usa-color-gray-warm-10: #e6e6e2; + --usa-color-gray-warm-20: #cac9c0; + --usa-color-gray-warm-30: #afaea2; + --usa-color-gray-warm-40: #929285; + --usa-color-gray-warm-50: #76766a; + --usa-color-gray-warm-60: #5d5d52; + --usa-color-gray-warm-70: #454540; + --usa-color-gray-warm-80: #2e2e2a; + --usa-color-gray-warm-90: #171716; + --usa-color-gray-1: #fcfcfc; + --usa-color-gray-2: #f9f9f9; + --usa-color-gray-3: #f6f6f6; + --usa-color-gray-4: #f3f3f3; + --usa-color-gray-5: #f0f0f0; + --usa-color-gray-10: #e6e6e6; + --usa-color-gray-20: #c9c9c9; + --usa-color-gray-30: #adadad; + --usa-color-gray-40: #919191; + --usa-color-gray-50: #757575; + --usa-color-gray-60: #5c5c5c; + --usa-color-gray-70: #454545; + --usa-color-gray-80: #2e2e2e; + --usa-color-gray-90: #1b1b1b; + --usa-color-gray-100: #000; + --usa-color-green-cool-5: #ecf3ec; + --usa-color-green-cool-10: #dbebde; + --usa-color-green-cool-20: #b4d0b9; + --usa-color-green-cool-30: #86b98e; + --usa-color-green-cool-40: #5e9f69; + --usa-color-green-cool-50: #4d8055; + --usa-color-green-cool-60: #446443; + --usa-color-green-cool-70: #37493b; + --usa-color-green-cool-80: #28312a; + --usa-color-green-cool-90: #1a1f1a; + --usa-color-green-cool-vivid-5: #e3f5e1; + --usa-color-green-cool-vivid-10: #b7f5bd; + --usa-color-green-cool-vivid-20: #70e17b; + --usa-color-green-cool-vivid-30: #21c834; + --usa-color-green-cool-vivid-40: #00a91c; + --usa-color-green-cool-vivid-50: #008817; + --usa-color-green-cool-vivid-60: #216e1f; + --usa-color-green-cool-vivid-70: #154c21; + --usa-color-green-cool-vivid-80: #19311e; + --usa-color-green-warm-5: #f1f4d7; + --usa-color-green-warm-10: #e7eab7; + --usa-color-green-warm-20: #cbd17a; + --usa-color-green-warm-30: #a6b557; + --usa-color-green-warm-40: #8a984b; + --usa-color-green-warm-50: #6f7a41; + --usa-color-green-warm-60: #5a5f38; + --usa-color-green-warm-70: #45472f; + --usa-color-green-warm-80: #2d2f21; + --usa-color-green-warm-90: #171712; + --usa-color-green-warm-vivid-5: #f5fbc1; + --usa-color-green-warm-vivid-10: #e7f434; + --usa-color-green-warm-vivid-20: #c5d30a; + --usa-color-green-warm-vivid-30: #a3b72c; + --usa-color-green-warm-vivid-40: #7e9c1d; + --usa-color-green-warm-vivid-50: #6a7d00; + --usa-color-green-warm-vivid-60: #5a6613; + --usa-color-green-warm-vivid-70: #4b4e10; + --usa-color-green-warm-vivid-80: #38380b; + --usa-color-green-5: #eaf4dd; + --usa-color-green-10: #dfeacd; + --usa-color-green-20: #b8d293; + --usa-color-green-30: #9bb672; + --usa-color-green-40: #7d9b4e; + --usa-color-green-50: #607f35; + --usa-color-green-60: #4c6424; + --usa-color-green-70: #3c4a29; + --usa-color-green-80: #293021; + --usa-color-green-90: #161814; + --usa-color-green-vivid-5: #ddf9c7; + --usa-color-green-vivid-10: #c5ee93; + --usa-color-green-vivid-20: #98d035; + --usa-color-green-vivid-30: #7fb135; + --usa-color-green-vivid-40: #719f2a; + --usa-color-green-vivid-50: #538200; + --usa-color-green-vivid-60: #466c04; + --usa-color-green-vivid-70: #2f4a0b; + --usa-color-green-vivid-80: #243413; + --usa-color-indigo-cool-5: #eef0f9; + --usa-color-indigo-cool-10: #e1e6f9; + --usa-color-indigo-cool-20: #bbc8f5; + --usa-color-indigo-cool-30: #96abee; + --usa-color-indigo-cool-40: #6b8ee8; + --usa-color-indigo-cool-50: #496fd8; + --usa-color-indigo-cool-60: #3f57a6; + --usa-color-indigo-cool-70: #374274; + --usa-color-indigo-cool-80: #292d42; + --usa-color-indigo-cool-90: #151622; + --usa-color-indigo-cool-vivid-5: #edf0ff; + --usa-color-indigo-cool-vivid-10: #dee5ff; + --usa-color-indigo-cool-vivid-20: #b8c8ff; + --usa-color-indigo-cool-vivid-30: #94adff; + --usa-color-indigo-cool-vivid-40: #628ef4; + --usa-color-indigo-cool-vivid-50: #4866ff; + --usa-color-indigo-cool-vivid-60: #3e4ded; + --usa-color-indigo-cool-vivid-70: #222fbf; + --usa-color-indigo-cool-vivid-80: #1b2b85; + --usa-color-indigo-warm-5: #f1eff7; + --usa-color-indigo-warm-10: #e7e3fa; + --usa-color-indigo-warm-20: #cbc4f2; + --usa-color-indigo-warm-30: #afa5e8; + --usa-color-indigo-warm-40: #9287d8; + --usa-color-indigo-warm-50: #7665d1; + --usa-color-indigo-warm-60: #5e519e; + --usa-color-indigo-warm-70: #453c7b; + --usa-color-indigo-warm-80: #2e2c40; + --usa-color-indigo-warm-90: #18161d; + --usa-color-indigo-warm-vivid-5: #f5f2ff; + --usa-color-indigo-warm-vivid-10: #e4deff; + --usa-color-indigo-warm-vivid-20: #cfc4fd; + --usa-color-indigo-warm-vivid-30: #b69fff; + --usa-color-indigo-warm-vivid-40: #967efb; + --usa-color-indigo-warm-vivid-50: #745fe9; + --usa-color-indigo-warm-vivid-60: #5942d2; + --usa-color-indigo-warm-vivid-70: #3d2c9d; + --usa-color-indigo-warm-vivid-80: #261f5b; + --usa-color-indigo-5: #efeff8; + --usa-color-indigo-10: #e5e4fa; + --usa-color-indigo-20: #c5c5f3; + --usa-color-indigo-30: #a5a8eb; + --usa-color-indigo-40: #8889db; + --usa-color-indigo-50: #676cc8; + --usa-color-indigo-60: #4d52af; + --usa-color-indigo-70: #3d4076; + --usa-color-indigo-80: #2b2c40; + --usa-color-indigo-90: #16171f; + --usa-color-indigo-vivid-5: #f0f0ff; + --usa-color-indigo-vivid-10: #e0e0ff; + --usa-color-indigo-vivid-20: #ccceff; + --usa-color-indigo-vivid-30: #a3a7fa; + --usa-color-indigo-vivid-40: #8289ff; + --usa-color-indigo-vivid-50: #656bd7; + --usa-color-indigo-vivid-60: #4a50c4; + --usa-color-indigo-vivid-70: #3333a3; + --usa-color-indigo-vivid-80: #212463; + --usa-color-magenta-5: #f9f0f2; + --usa-color-magenta-10: #f6e1e8; + --usa-color-magenta-20: #f0bbcc; + --usa-color-magenta-30: #e895b3; + --usa-color-magenta-40: #e0699f; + --usa-color-magenta-50: #c84281; + --usa-color-magenta-60: #8b4566; + --usa-color-magenta-70: #66364b; + --usa-color-magenta-80: #402731; + --usa-color-magenta-90: #1b1617; + --usa-color-magenta-vivid-5: #fff2f5; + --usa-color-magenta-vivid-10: #ffddea; + --usa-color-magenta-vivid-20: #ffb4cf; + --usa-color-magenta-vivid-30: #ff87b2; + --usa-color-magenta-vivid-40: #fd4496; + --usa-color-magenta-vivid-50: #d72d79; + --usa-color-magenta-vivid-60: #ab2165; + --usa-color-magenta-vivid-70: #731f44; + --usa-color-magenta-vivid-80: #4f172e; + --usa-color-mint-cool-5: #e0f7f6; + --usa-color-mint-cool-10: #c4eeeb; + --usa-color-mint-cool-20: #9bd4cf; + --usa-color-mint-cool-30: #6fbab3; + --usa-color-mint-cool-40: #4f9e99; + --usa-color-mint-cool-50: #40807e; + --usa-color-mint-cool-60: #376462; + --usa-color-mint-cool-70: #2a4b45; + --usa-color-mint-cool-80: #203131; + --usa-color-mint-cool-90: #111818; + --usa-color-mint-cool-vivid-5: #d5fbf3; + --usa-color-mint-cool-vivid-10: #7efbe1; + --usa-color-mint-cool-vivid-20: #29e1cb; + --usa-color-mint-cool-vivid-30: #1dc2ae; + --usa-color-mint-cool-vivid-40: #00a398; + --usa-color-mint-cool-vivid-50: #008480; + --usa-color-mint-cool-vivid-60: #0f6460; + --usa-color-mint-cool-vivid-70: #0b4b3f; + --usa-color-mint-cool-vivid-80: #123131; + --usa-color-mint-5: #dbf6ed; + --usa-color-mint-10: #c7efe2; + --usa-color-mint-20: #92d9bb; + --usa-color-mint-30: #5abf95; + --usa-color-mint-40: #34a37e; + --usa-color-mint-50: #2e8367; + --usa-color-mint-60: #286846; + --usa-color-mint-70: #204e34; + --usa-color-mint-80: #193324; + --usa-color-mint-90: #0d1a12; + --usa-color-mint-vivid-5: #c9fbeb; + --usa-color-mint-vivid-10: #83fcd4; + --usa-color-mint-vivid-20: #0ceda6; + --usa-color-mint-vivid-30: #04c585; + --usa-color-mint-vivid-40: #00a871; + --usa-color-mint-vivid-50: #008659; + --usa-color-mint-vivid-60: #146947; + --usa-color-mint-vivid-70: #0c4e29; + --usa-color-mint-vivid-80: #0d351e; + --usa-color-orange-warm-5: #faeee5; + --usa-color-orange-warm-10: #fbe0d0; + --usa-color-orange-warm-20: #f7bca2; + --usa-color-orange-warm-30: #f3966d; + --usa-color-orange-warm-40: #e17141; + --usa-color-orange-warm-50: #bd5727; + --usa-color-orange-warm-60: #914734; + --usa-color-orange-warm-70: #633a32; + --usa-color-orange-warm-80: #3d2925; + --usa-color-orange-warm-90: #1c1615; + --usa-color-orange-warm-vivid-5: #fff3ea; + --usa-color-orange-warm-vivid-10: #ffe2d1; + --usa-color-orange-warm-vivid-20: #fbbaa7; + --usa-color-orange-warm-vivid-30: #fc906d; + --usa-color-orange-warm-vivid-40: #ff580a; + --usa-color-orange-warm-vivid-50: #cf4900; + --usa-color-orange-warm-vivid-60: #a72f10; + --usa-color-orange-warm-vivid-70: #782312; + --usa-color-orange-warm-vivid-80: #3d231d; + --usa-color-orange-5: #f6efe9; + --usa-color-orange-10: #f2e4d4; + --usa-color-orange-20: #f3bf90; + --usa-color-orange-30: #f09860; + --usa-color-orange-40: #dd7533; + --usa-color-orange-50: #a86437; + --usa-color-orange-60: #775540; + --usa-color-orange-70: #524236; + --usa-color-orange-80: #332d27; + --usa-color-orange-90: #1b1614; + --usa-color-orange-vivid-5: #fef2e4; + --usa-color-orange-vivid-10: #fce2c5; + --usa-color-orange-vivid-20: #ffbc78; + --usa-color-orange-vivid-30: #fa9441; + --usa-color-orange-vivid-40: #e66f0e; + --usa-color-orange-vivid-50: #c05600; + --usa-color-orange-vivid-60: #8c471c; + --usa-color-orange-vivid-70: #5f3617; + --usa-color-orange-vivid-80: #352313; + --usa-color-red-cool-5: #f8eff1; + --usa-color-red-cool-10: #f3e1e4; + --usa-color-red-cool-20: #ecbec6; + --usa-color-red-cool-30: #e09aa6; + --usa-color-red-cool-40: #e16b80; + --usa-color-red-cool-50: #cd425b; + --usa-color-red-cool-60: #9e394b; + --usa-color-red-cool-70: #68363f; + --usa-color-red-cool-80: #40282c; + --usa-color-red-cool-90: #1e1517; + --usa-color-red-cool-vivid-5: #fff2f5; + --usa-color-red-cool-vivid-10: #f8dfe2; + --usa-color-red-cool-vivid-20: #f8b9c5; + --usa-color-red-cool-vivid-30: #fd8ba0; + --usa-color-red-cool-vivid-40: #f45d79; + --usa-color-red-cool-vivid-50: #e41d3d; + --usa-color-red-cool-vivid-60: #b21d38; + --usa-color-red-cool-vivid-70: #822133; + --usa-color-red-cool-vivid-80: #4f1c24; + --usa-color-red-warm-5: #f6efea; + --usa-color-red-warm-10: #f4e3db; + --usa-color-red-warm-20: #ecc0a7; + --usa-color-red-warm-30: #dca081; + --usa-color-red-warm-40: #d27a56; + --usa-color-red-warm-50: #c3512c; + --usa-color-red-warm-60: #805039; + --usa-color-red-warm-70: #524236; + --usa-color-red-warm-80: #332d29; + --usa-color-red-warm-90: #1f1c18; + --usa-color-red-warm-vivid-5: #fff5ee; + --usa-color-red-warm-vivid-10: #fce1d4; + --usa-color-red-warm-vivid-20: #f6bd9c; + --usa-color-red-warm-vivid-30: #f39268; + --usa-color-red-warm-vivid-40: #ef5e25; + --usa-color-red-warm-vivid-50: #d54309; + --usa-color-red-warm-vivid-60: #9c3d10; + --usa-color-red-warm-vivid-70: #63340f; + --usa-color-red-warm-vivid-80: #3e2a1e; + --usa-color-red-5: #f9eeee; + --usa-color-red-10: #f8e1de; + --usa-color-red-20: #f7bbb1; + --usa-color-red-30: #f2938c; + --usa-color-red-40: #e9695f; + --usa-color-red-50: #d83933; + --usa-color-red-60: #a23737; + --usa-color-red-70: #6f3331; + --usa-color-red-80: #3e2927; + --usa-color-red-90: #1b1616; + --usa-color-red-vivid-5: #fff3f2; + --usa-color-red-vivid-10: #fde0db; + --usa-color-red-vivid-20: #fdb8ae; + --usa-color-red-vivid-30: #ff8d7b; + --usa-color-red-vivid-40: #fb5a47; + --usa-color-red-vivid-50: #e52207; + --usa-color-red-vivid-60: #b50909; + --usa-color-red-vivid-70: #8b0a03; + --usa-color-red-vivid-80: #5c1111; + --usa-color-violet-warm-5: #f8f0f9; + --usa-color-violet-warm-10: #f6dff8; + --usa-color-violet-warm-20: #e2bee4; + --usa-color-violet-warm-30: #d29ad8; + --usa-color-violet-warm-40: #bf77c8; + --usa-color-violet-warm-50: #b04abd; + --usa-color-violet-warm-60: #864381; + --usa-color-violet-warm-70: #5c395a; + --usa-color-violet-warm-80: #382936; + --usa-color-violet-warm-90: #1b151b; + --usa-color-violet-warm-vivid-5: #fef2ff; + --usa-color-violet-warm-vivid-10: #fbdcff; + --usa-color-violet-warm-vivid-20: #f4b2ff; + --usa-color-violet-warm-vivid-30: #ee83ff; + --usa-color-violet-warm-vivid-40: #d85bef; + --usa-color-violet-warm-vivid-50: #be32d0; + --usa-color-violet-warm-vivid-60: #93348c; + --usa-color-violet-warm-vivid-70: #711e6c; + --usa-color-violet-warm-vivid-80: #481441; + --usa-color-violet-5: #f4f1f9; + --usa-color-violet-10: #ebe3f9; + --usa-color-violet-20: #d0c3e9; + --usa-color-violet-30: #b8a2e3; + --usa-color-violet-40: #9d84d2; + --usa-color-violet-50: #8168b3; + --usa-color-violet-60: #665190; + --usa-color-violet-70: #4c3d69; + --usa-color-violet-80: #312b3f; + --usa-color-violet-90: #18161d; + --usa-color-violet-vivid-5: #f7f2ff; + --usa-color-violet-vivid-10: #ede3ff; + --usa-color-violet-vivid-20: #d5bfff; + --usa-color-violet-vivid-30: #c39deb; + --usa-color-violet-vivid-40: #ad79e9; + --usa-color-violet-vivid-50: #9355dc; + --usa-color-violet-vivid-60: #783cb9; + --usa-color-violet-vivid-70: #54278f; + --usa-color-violet-vivid-80: #39215e; + --usa-color-white-transparent-5: rgb(255 255 255 / 1%); + --usa-color-white-transparent-10: rgb(255 255 255 / 10%); + --usa-color-white-transparent-20: rgb(255 255 255 / 20%); + --usa-color-white-transparent-30: rgb(255 255 255 / 30%); + --usa-color-white-transparent-40: rgb(255 255 255 / 40%); + --usa-color-white-transparent-50: rgb(255 255 255 / 50%); + --usa-color-white-transparent-60: rgb(255 255 255 / 60%); + --usa-color-white-transparent-70: rgb(255 255 255 / 70%); + --usa-color-white-transparent-80: rgb(255 255 255 / 80%); + --usa-color-white-transparent-90: rgb(255 255 255 / 90%); + --usa-color-yellow-5: #faf3d1; + --usa-color-yellow-10: #f5e6af; + --usa-color-yellow-20: #e6c74c; + --usa-color-yellow-30: #c9ab48; + --usa-color-yellow-40: #a88f48; + --usa-color-yellow-50: #8a7237; + --usa-color-yellow-60: #6b5a39; + --usa-color-yellow-70: #504332; + --usa-color-yellow-80: #332d27; + --usa-color-yellow-90: #1a1614; + --usa-color-yellow-vivid-5: #fff5c2; + --usa-color-yellow-vivid-10: #fee685; + --usa-color-yellow-vivid-20: #face00; + --usa-color-yellow-vivid-30: #ddaa01; + --usa-color-yellow-vivid-40: #b38c00; + --usa-color-yellow-vivid-50: #947100; + --usa-color-yellow-vivid-60: #776017; + --usa-color-yellow-vivid-70: #5c4809; + --usa-color-yellow-vivid-80: #422d19; + --usa-spacing-1: 0.5rem; + --usa-spacing-2: 1rem; + --usa-spacing-3: 1.5rem; + --usa-spacing-4: 2rem; + --usa-spacing-5: 2.5rem; + --usa-spacing-6: 3rem; + --usa-spacing-05: 0.025rem; + --base-lightest: var(--usa-color-gray-5); + --base-light: var(--usa-color-gray-10); +} diff --git a/src/components/usa-alert/index.ts b/src/components/usa-alert/index.ts new file mode 100644 index 00000000..b18a35e3 --- /dev/null +++ b/src/components/usa-alert/index.ts @@ -0,0 +1,78 @@ +import { css, html, LitElement, nothing } from "lit"; +import { + customElement, + property, + queryAssignedNodes, + state, +} from "lit/decorators.js"; +import stylesBaseVariables from "./base-variables.css"; +import styles from "./usa-alert.css"; + +/** + * @summary The usa-alert component. + * + * @attribute {string} type - The type of alert (info, warning, etc) + * @attribute {string} noIcon - Use this attribute to hide the icon + * + * @slot heading - Text for the heading. Make sure to specify the correct heading level (h2, h3, etc) + * @slot content - Body content for the alert. Can contain HTML (links, etc). + * + * @tagname usa-alert + */ + +@customElement("usa-alert") +export class MDAlert extends LitElement { + @property({ type: String }) + type = "info"; + + @property({ type: Boolean, attribute: "no-icon" }) + accessor noIcon = false; + + @queryAssignedNodes({ slot: "heading", flatten: true }) + _headingNodes!: Array; + + @state() + private accessor _hasHeader = false; + + slotChange() { + this._hasHeader = this._headingNodes.length > 0; + } + + static styles = [ + css` + :host { + /** Icons */ + --usa-icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); + --usa-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"); + --usa-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z' /%3E%3C/svg%3E"); + --usa-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); + } + `, + stylesBaseVariables, + styles, + ]; + + render() { + return html` +
+
+
+ +
+ this.slotChange()}> +
+
+

+ ${ + this._hasHeader + ? nothing + : html`` + } + + +

+
+
+ `; + } +} diff --git a/src/components/usa-alert/usa-alert.css b/src/components/usa-alert/usa-alert.css new file mode 100644 index 00000000..c33552b9 --- /dev/null +++ b/src/components/usa-alert/usa-alert.css @@ -0,0 +1,124 @@ +:host { + --icon-info: var(--usa-icon-info); + --icon-warning: var(--usa-icon-warning); + --icon-success: var(--usa-icon-check-circle); + --icon-error: var(--usa-icon-error); + --icon-emergency: var(--usa-icon-error); + + box-sizing: border-box; +} + +.usa-alert { + background-color: var(--base-lightest); + border-left: var(--alert-bar-width, var(--usa-spacing-1)) solid + var(--base-light); + + .usa-alert__body { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-left: var(--usa-spacing-4); + padding-block: var(--theme-alert-padding-y, var(--usa-spacing-2)); + padding-inline: var(--theme-alert-padding-x, var(--usa-spacing-3)); + + .usa-alert__icon { + left: 2rem; + position: absolute; + width: 2rem; /* TODO */ + } + + .usa-alert__heading { + align-items: center; + display: flex; + } + + .usa-alert__text { + margin-bottom: 0; + margin-top: 0; + } + } +} + +.usa-alert--success { + .usa-alert__icon { + content: var(--icon-success); + } + + background-color: var(--usa-color-green-cool-5); + border-left-color: var(--usa-color-green-cool-vivid-40); +} + +.usa-alert--info { + .usa-alert__icon { + content: var(--icon-info); + } + + background-color: var(--usa-color-cyan-5); + border-left-color: var(--usa-color-cyan-vivid-30); +} + +.usa-alert--warning { + .usa-alert__icon { + content: var(--icon-warning); + } + + background-color: var(--usa-color-yellow-5); + border-left-color: var(--usa-color-gold-vivid-20); +} + +.usa-alert--error { + .usa-alert__icon { + content: var(--icon-error); + } + + background-color: var(--usa-color-red-warm-10); + border-left-color: var(--usa-color-red-warm-vivid-50); +} + +.usa-alert--slim { + .usa-alert__body { + margin-left: 1rem; + + .usa-alert__icon { + width: 1.5rem; + } + } +} + +.usa-alert--no-icon { + .usa-alert__body { + margin-left: 0; + + .usa-alert__icon { + display: none; + } + } +} + +::slotted(h1), +::slotted(h2), +::slotted(h3), +::slotted(h4), +::slotted(h5), +::slotted(h6) { + font-family: + "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, + sans-serif; /* TODO */ + + font-size: 1.33rem; /* TODO */ + line-height: 0.9; /* TODO */ + margin-bottom: 0; + margin-top: 0; +} + +::slotted(p), +::slotted(div) { + font-family: + "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, + sans-serif; /* TODO */ + + font-size: 1.06rem; /* TODO */ + line-height: 1.5; /* TODO */ + margin-bottom: 0; + margin-top: 0; +}