@codecademy/styleguide 79.2.0-alpha.835d7c.0 → 79.2.0-alpha.8f513c.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [79.2.0-alpha.
|
|
6
|
+
## [79.2.0-alpha.8f513c.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.2.0-alpha.8f513c.0) (2026-02-17)
|
|
7
7
|
|
|
8
8
|
### Features
|
|
9
9
|
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/styleguide",
|
|
3
3
|
"description": "Styleguide & Component library for codecademy.com",
|
|
4
|
-
"version": "79.2.0-alpha.
|
|
4
|
+
"version": "79.2.0-alpha.8f513c.0",
|
|
5
5
|
"author": "Codecademy Engineering",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
10
10
|
"repository": "git@github.com:Codecademy/gamut.git",
|
|
11
|
-
"gitHead": "
|
|
11
|
+
"gitHead": "b38ec902ce0b54ba520f69595fa00560daaf5c47"
|
|
12
12
|
}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
2
|
|
|
3
3
|
import { AboutHeader, TokenTable } from '~styleguide/blocks';
|
|
4
4
|
|
|
5
5
|
import { defaultColumns, getPropRows } from '../../shared/elements';
|
|
6
|
-
import * as PositioningStories from './Positioning.stories';
|
|
7
6
|
|
|
8
7
|
export const parameters = {
|
|
9
8
|
title: 'Positioning',
|
|
@@ -12,7 +11,7 @@ export const parameters = {
|
|
|
12
11
|
status: 'updating',
|
|
13
12
|
};
|
|
14
13
|
|
|
15
|
-
<Meta title="Foundations/System/Props/Positioning"
|
|
14
|
+
<Meta title="Foundations/System/Props/Positioning" />
|
|
16
15
|
|
|
17
16
|
<AboutHeader {...parameters} />
|
|
18
17
|
|
|
@@ -27,8 +26,4 @@ const PositioningExample = styled.div(system.positioning);
|
|
|
27
26
|
<PositioningExample position="absolute" zIndex={2} top="0" left="0" />;
|
|
28
27
|
```
|
|
29
28
|
|
|
30
|
-
These positioning props support both physical and logical CSS properties and will render the appropriate properties based on `useLogicalProperties`'s value passed into the `<GamutProvider>` at the root of your application.
|
|
31
|
-
|
|
32
|
-
<Canvas of={PositioningStories.PositionExample} />
|
|
33
|
-
|
|
34
29
|
<TokenTable rows={getPropRows('positioning')} columns={defaultColumns} />
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { Box, Markdown } from '@codecademy/gamut';
|
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
-
|
|
4
|
-
const meta: Meta<typeof Box> = {
|
|
5
|
-
title: 'Foundations/System/Props/Positioning',
|
|
6
|
-
component: Box,
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
export default meta;
|
|
10
|
-
type Story = StoryObj<typeof Box>;
|
|
11
|
-
|
|
12
|
-
export const PositionExample: Story = {
|
|
13
|
-
render: () => (
|
|
14
|
-
<Box bg="background-selected" height="150px" position="relative">
|
|
15
|
-
<Box
|
|
16
|
-
bg="primary"
|
|
17
|
-
color="background-contrast"
|
|
18
|
-
left={16}
|
|
19
|
-
p={16}
|
|
20
|
-
position="absolute"
|
|
21
|
-
top={16}
|
|
22
|
-
>
|
|
23
|
-
This box has{' '}
|
|
24
|
-
<Markdown text="`position='absolute'`, `top={16}`, and `left={16}`." />{' '}
|
|
25
|
-
Inspect the example to see what CSS properties are rendered. You can
|
|
26
|
-
also change the value of{' '}
|
|
27
|
-
<Markdown text="`useLogicalProperties` and `direction`" /> in the
|
|
28
|
-
toolbar to see how the box renders differently.
|
|
29
|
-
</Box>
|
|
30
|
-
</Box>
|
|
31
|
-
),
|
|
32
|
-
};
|