Merge branch 'main' into js-card-color-modes

Codecademy · Mar 27, 2024 · 40c97df · 40c97df
2 parents eb8aeda + 8429aa5
commit 40c97df
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 9 deletions.
diff --git a/packages/gamut-icons/CHANGELOG.md b/packages/gamut-icons/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.20.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-03-21)
+
+### Features
+
+- **icons:** add miniPinIcon ([fcf7fc6](https://github.com/Codecademy/gamut/commit/fcf7fc61ee200d0b3451eed18430a68a8b370ea6))
+
 ## [9.19.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-03-11)
 
 ### Features

diff --git a/packages/gamut-icons/package.json b/packages/gamut-icons/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-icons",
   "description": "Icon library for codecademy.com",
-  "version": "9.19.0",
+  "version": "9.20.0",
   "author": "Codecademy <[email protected]>",
   "dependencies": {
     "@codecademy/gamut-styles": "16.2.0",

diff --git a/packages/gamut-icons/src/svg/mini/mini-pin-icon.svg b/packages/gamut-icons/src/svg/mini/mini-pin-icon.svg
diff --git a/packages/gamut-kit/CHANGELOG.md b/packages/gamut-kit/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.6.390](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-03-21)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
 ### [0.6.389](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-03-18)
 
 **Note:** Version bump only for package @codecademy/gamut-kit

diff --git a/packages/gamut-kit/package.json b/packages/gamut-kit/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@codecademy/gamut-kit",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "0.6.389",
+  "version": "0.6.390",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
-    "@codecademy/gamut": "55.14.1",
-    "@codecademy/gamut-icons": "9.19.0",
+    "@codecademy/gamut": "55.14.2",
+    "@codecademy/gamut-icons": "9.20.0",
     "@codecademy/gamut-illustrations": "0.42.0",
     "@codecademy/gamut-patterns": "0.9.11",
     "@codecademy/gamut-styles": "16.2.0",

diff --git a/packages/gamut/CHANGELOG.md b/packages/gamut/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [55.14.2](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-03-21)
+
+**Note:** Version bump only for package @codecademy/gamut
+
 ### [55.14.1](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-03-18)
 
 ### Bug Fixes

diff --git a/packages/gamut/package.json b/packages/gamut/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "55.14.1",
+  "version": "55.14.2",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.19.0",
+    "@codecademy/gamut-icons": "9.20.0",
     "@codecademy/gamut-illustrations": "0.42.0",
     "@codecademy/gamut-patterns": "0.9.11",
     "@codecademy/gamut-styles": "16.2.0",

diff --git a/packages/styleguide/CHANGELOG.md b/packages/styleguide/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [66.14.3](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-03-21)
+
+### Bug Fixes
+
+- **popover:** add position to popover stories ([dd872c5](https://github.com/Codecademy/gamut/commit/dd872c5a51471dedd7b351bfe9e6852091b0667a))
+
+### [66.14.2](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-03-21)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
 ### [66.14.1](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-03-18)
 
 ### Bug Fixes

diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "66.14.1",
+  "version": "66.14.3",
   "author": "Codecademy Engineering",
   "dependencies": {
-    "@codecademy/gamut": "55.14.1",
-    "@codecademy/gamut-icons": "9.19.0",
+    "@codecademy/gamut": "55.14.2",
+    "@codecademy/gamut-icons": "9.20.0",
     "@codecademy/gamut-illustrations": "0.42.0",
     "@codecademy/gamut-patterns": "0.9.11",
     "@codecademy/gamut-styles": "16.2.0",

diff --git a/packages/styleguide/stories/Molecules/Popover/Popover.examples.tsx b/packages/styleguide/stories/Molecules/Popover/Popover.examples.tsx
@@ -96,3 +96,17 @@ export const PatternedPopoversGrid = (args: PopoverProps) => {
     </LayoutGrid>
   );
 };
+
+export const PositionPopoverGrid = (args: PopoverProps) => {
+  return (
+    <LayoutGrid columnGap={8} rowGap={48}>
+      {(['above', 'below'] as const).map((position) => (
+        <Column key={position} size={4}>
+          <FlexBox justifyContent="center">
+            <PopoverExample {...args} position={position} />
+          </FlexBox>
+        </Column>
+      ))}
+    </LayoutGrid>
+  );
+};
diff --git a/packages/styleguide/stories/Molecules/Popover/index.stories.mdx b/packages/styleguide/stories/Molecules/Popover/index.stories.mdx
@@ -9,6 +9,7 @@ import {
   PatternedPopoversGrid,
   PopoverExample,
   PopoverWithoutFocus,
+  PositionPopoverGrid,
 } from './Popover.examples';
 
 <Meta
@@ -74,6 +75,18 @@ The outline color is theme.colors.secondary so in Dark Mode, the outline will be
   </Story>
 </Canvas>
 
+## Position
+
+Using the position prop, you can add a position (`above` or `below`) to the popover. It will be `below` by default.
+
+<Canvas>
+  <Story name="Position">
+    {(args) => {
+      return <PositionPopoverGrid {...args}  />;
+    }}
+  </Story>
+</Canvas>
+
 ## Patterns
 
 Using the pattern prop, you can apply a patterned background to the popover.