New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@invisionag/iris-settings
Advanced tools
@invisionag/iris-settings - npm Package Compare versions
Comparing version 6.3.16 to 6.3.17
| { | ||
| "name": "@invisionag/iris-settings", | ||
| "version": "6.3.16", | ||
| "version": "6.3.17", | ||
| "main": "dist/index.js", | ||
@@ -9,5 +9,5 @@ "repository": "git@github.com:ivx/iris.git", | ||
| "@invisionag/injixo-tokens": "^1.1.6", | ||
| "@invisionag/iris-react-heading": "^4.4.16" | ||
| "@invisionag/iris-react-heading": "^4.4.17" | ||
| }, | ||
| "gitHead": "356b040be0fd4c7598ee54ec8ae70e4551365107" | ||
| "gitHead": "4eb282def1b6189c10bb6961662b40cc3cd12ccb" | ||
| } |
| // @flow | ||
| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import Heading from '@invisionag/iris-react-heading'; | ||
| import { color } from '@invisionag/injixo-tokens/injixo'; | ||
| import P from '@invisionag/iris-react-paragraph'; | ||
| import type { StyledComponent } from 'styled-components'; | ||
| import { settings } from './src'; | ||
| const StoryBody = styled.div` | ||
| const StoryBody: StyledComponent<void, empty, HTMLDivElement> = styled.div` | ||
| background-color: ${color.ui0}; | ||
@@ -15,3 +15,3 @@ padding: ${settings.spacingLarge}; | ||
| const Table = styled.table` | ||
| const Table: StyledComponent<void, empty, HTMLTableElement> = styled.table` | ||
| border-collapse: separate; | ||
@@ -21,3 +21,3 @@ border-spacing: ${settings.spacing}; | ||
| const Th = styled.th` | ||
| const Th: StyledComponent<void, empty, any> = styled.th` | ||
| text-align: left; | ||
@@ -29,7 +29,11 @@ padding: ${settings.spacingSmall} ${settings.spacing}; | ||
| const Td = styled.td` | ||
| const Td: StyledComponent<void, empty, HTMLTableCellElement> = styled.td` | ||
| vertical-align: top; | ||
| `; | ||
| const Box = styled.div` | ||
| const Box: StyledComponent< | ||
| { edgeLength: string }, | ||
| empty, | ||
| HTMLDivElement, | ||
| > = styled.div` | ||
| width: ${({ edgeLength }) => edgeLength}; | ||
@@ -40,102 +44,110 @@ height: ${({ edgeLength }) => edgeLength}; | ||
| const Text = styled.span` | ||
| const Text: StyledComponent< | ||
| { fontSize: string }, | ||
| empty, | ||
| HTMLSpanElement, | ||
| > = styled.span` | ||
| font-size: ${({ fontSize }) => fontSize}; | ||
| `; | ||
| storiesOf('Settings', module) | ||
| .add('Spacings', () => ( | ||
| <StoryBody> | ||
| <Heading>Spacings</Heading> | ||
| <P> | ||
| Spacings based on the base font size of {settings.basePx} | ||
| px | ||
| </P> | ||
| <Table> | ||
| <thead> | ||
| <tr> | ||
| <Th>Variable</Th> | ||
| <Th>rem</Th> | ||
| <Th>Visual Representation</Th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <Td>spacingTiny</Td> | ||
| <Td>{settings.spacingTiny}</Td> | ||
| <Td> | ||
| <Box edgeLength={settings.spacingTiny} /> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>spacingSmall</Td> | ||
| <Td>{settings.spacingSmall}</Td> | ||
| <Td> | ||
| <Box edgeLength={settings.spacingSmall} /> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>spacing</Td> | ||
| <Td>{settings.spacing}</Td> | ||
| <Td> | ||
| <Box edgeLength={settings.spacing} /> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>spacingLarge</Td> | ||
| <Td>{settings.spacingLarge}</Td> | ||
| <Td> | ||
| <Box edgeLength={settings.spacingLarge} /> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>spacingHuge</Td> | ||
| <Td>{settings.spacingHuge}</Td> | ||
| <Td> | ||
| <Box edgeLength={settings.spacingHuge} /> | ||
| </Td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </StoryBody> | ||
| )) | ||
| .add('Font Sizes', () => ( | ||
| <StoryBody> | ||
| <Heading>Font Sizes</Heading> | ||
| <P> | ||
| Font sizes based on the base of {settings.basePx} | ||
| px | ||
| </P> | ||
| <Table> | ||
| <thead> | ||
| <tr> | ||
| <Th>Variable</Th> | ||
| <Th>rem</Th> | ||
| <Th>Visual Representation</Th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <Td>fontSizeSmall</Td> | ||
| <Td>{settings.fontSizeSmall}</Td> | ||
| <Td> | ||
| <Text fontSize={settings.fontSizeSmall}>fontSizeSmall</Text> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>fontSize</Td> | ||
| <Td>{settings.fontSize}</Td> | ||
| <Td> | ||
| <Text fontSize={settings.fontSize}>fontSize</Text> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>fontSizeLarge</Td> | ||
| <Td>{settings.fontSizeLarge}</Td> | ||
| <Td> | ||
| <Text fontSize={settings.fontSizeLarge}>fontSizeLarge</Text> | ||
| </Td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </StoryBody> | ||
| )); | ||
| export default { | ||
| title: 'Settings', | ||
| }; | ||
| export const Spacings = () => ( | ||
| <StoryBody> | ||
| <Heading>Spacings</Heading> | ||
| <P> | ||
| Spacings based on the base font size of {settings.basePx} | ||
| px | ||
| </P> | ||
| <Table> | ||
| <thead> | ||
| <tr> | ||
| <Th>Variable</Th> | ||
| <Th>rem</Th> | ||
| <Th>Visual Representation</Th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <Td>spacingTiny</Td> | ||
| <Td>{settings.spacingTiny}</Td> | ||
| <Td> | ||
| <Box edgeLength={settings.spacingTiny} /> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>spacingSmall</Td> | ||
| <Td>{settings.spacingSmall}</Td> | ||
| <Td> | ||
| <Box edgeLength={settings.spacingSmall} /> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>spacing</Td> | ||
| <Td>{settings.spacing}</Td> | ||
| <Td> | ||
| <Box edgeLength={settings.spacing} /> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>spacingLarge</Td> | ||
| <Td>{settings.spacingLarge}</Td> | ||
| <Td> | ||
| <Box edgeLength={settings.spacingLarge} /> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>spacingHuge</Td> | ||
| <Td>{settings.spacingHuge}</Td> | ||
| <Td> | ||
| <Box edgeLength={settings.spacingHuge} /> | ||
| </Td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </StoryBody> | ||
| ); | ||
| export const FontSizes = () => ( | ||
| <StoryBody> | ||
| <Heading>Font Sizes</Heading> | ||
| <P> | ||
| Font sizes based on the base of {settings.basePx} | ||
| px | ||
| </P> | ||
| <Table> | ||
| <thead> | ||
| <tr> | ||
| <Th>Variable</Th> | ||
| <Th>rem</Th> | ||
| <Th>Visual Representation</Th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <Td>fontSizeSmall</Td> | ||
| <Td>{settings.fontSizeSmall}</Td> | ||
| <Td> | ||
| <Text fontSize={settings.fontSizeSmall}>fontSizeSmall</Text> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>fontSize</Td> | ||
| <Td>{settings.fontSize}</Td> | ||
| <Td> | ||
| <Text fontSize={settings.fontSize}>fontSize</Text> | ||
| </Td> | ||
| </tr> | ||
| <tr> | ||
| <Td>fontSizeLarge</Td> | ||
| <Td>{settings.fontSizeLarge}</Td> | ||
| <Td> | ||
| <Text fontSize={settings.fontSizeLarge}>fontSizeLarge</Text> | ||
| </Td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </StoryBody> | ||
| ); |
Fixed alerts
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.2%
14466
- Lines of code
- increased by3.06%
337
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes