fix(Alert): padding issue when no dismiss button

[LinKCoding]

Overview

Added responsive right padding for Alerts where there is no close button.
Smaller fixes for other files for consistency.

PR Checklist

• Related to designs: https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?type=design&node-id=30186-40358&mode=dev
  • maybe more specific to spacing: https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=45965%3A32582
• Related to JIRA ticket: GM-608
• I have run this code to verify it works

Testing Instructions

1. Boot up the server locally
2. go to packages/gamut/src/Alert/Alert.tsx
3. when checking the spacing for no close button, you'll need to go to packages/styleguide/stories/Molecules/Alert/index.stories.mdx and inside an args set onClose: false

E.g.

<Meta
  title={title}
  component={Alert}
  parameters={{
    subtitle:
      'An alert displays an important, succinct message, and provides actions for users to address (or dismiss the alert). It requires a user action to be dismissed.',
    status: 'current',
    source: 'gamut',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/TemYhRWOavsERWprDzRJCx',
    },
    padded: true,
  }}
  args={{
    type: 'general',
    placement: 'floating',
    cta: {
      children: 'Learn More',
    },
    children:
      'You have been logged out due to inactivity. Click the button to log in again.',
   // ADDED ONCLOSE HERE
    onClose: false,
  }}
/>

^ you can also go to .constants and change onClose there too.
4. Inspect the element(s) and check that the spacing(padding + column-gap) on the right-hand side is applied and that elements match the design's specs for all breakpoints
5. you may note that for the smallest breakpoint it's set to 4 ({_:4 ...} that's because the column-gap is 12 when there's no buttons, so both padding and column will add up to 16.
6 ...
7. Done!

PR Links and Envs

(None, just Gamut)

[dreamwasp]

have some comments to clean up but otherwise looking great!

[LinKCoding]

have some comments to clean up but otherwise looking great!

@dreamwasp should be fixed now, sorry about that!

[dreamwasp]

✨

[codecademydev]

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

[codecademydev]

🚀 Styleguide deploy preview ready!

https://661416e6e949a20fee5029b3--gamut-preview.netlify.app

Deploy Logs