From 5793bd66baa8f0b5ceef6d9894ad50c012969e1a Mon Sep 17 00:00:00 2001 From: Mnau-mnau Date: Wed, 20 Sep 2023 12:58:35 +0200 Subject: [PATCH 1/2] feat(StatusDot): add component --- .../expected/components_StatusDot_Default.png | Bin 0 -> 8414 bytes .../StatusDot/StatusDot.stories.tsx | 19 ++++++++++ src/components/StatusDot/StatusDot.tsx | 34 ++++++++++++++++++ src/components/StatusDot/index.ts | 1 + 4 files changed, 54 insertions(+) create mode 100644 .storybook/image-snapshots/expected/components_StatusDot_Default.png create mode 100644 src/components/StatusDot/StatusDot.stories.tsx create mode 100644 src/components/StatusDot/StatusDot.tsx create mode 100644 src/components/StatusDot/index.ts diff --git a/.storybook/image-snapshots/expected/components_StatusDot_Default.png b/.storybook/image-snapshots/expected/components_StatusDot_Default.png new file mode 100644 index 0000000000000000000000000000000000000000..c538c66fa24dbda647923a85f63b60b76f82448e GIT binary patch literal 8414 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 ( + + + + + + +); diff --git a/src/components/StatusDot/StatusDot.tsx b/src/components/StatusDot/StatusDot.tsx new file mode 100644 index 000000000..fa16212cd --- /dev/null +++ b/src/components/StatusDot/StatusDot.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import Styled from 'styled-components'; +import PropTypes from 'prop-types'; + +import { getRadii, pxToRem } from '../../utils'; + +const StatusDotColors = { + good: '100, 244, 81', + bad: '242, 46, 67', + neutral: '84, 129, 217', + inactive: '216, 216, 216', +} as const; + +const StatusDotComponent = Styled.div` + width: ${pxToRem(12)}; + height: ${pxToRem(12)}; + border-radius: ${getRadii('round')}; + background-color: rgb(${({ color }) => StatusDotColors[color]}); + border: 2px solid white; + box-shadow: 0 0 12px 0px rgba(${({ color }) => + `${StatusDotColors[color]}, 0.5`}); +`; + +const StatusDot = ({ + color = 'inactive', +}: { + color: keyof typeof StatusDotColors; +}) => ; + +StatusDot.propTypes = { + color: PropTypes.oneOf(Object.keys(StatusDotColors)), +}; + +export default StatusDot; diff --git a/src/components/StatusDot/index.ts b/src/components/StatusDot/index.ts new file mode 100644 index 000000000..6d0ec99da --- /dev/null +++ b/src/components/StatusDot/index.ts @@ -0,0 +1 @@ +export { default as StatusDot } from './StatusDot'; From 9804dad90efd140ecd7c4ce286e9120c552b2357 Mon Sep 17 00:00:00 2001 From: Mnau-mnau Date: Thu, 21 Sep 2023 16:53:52 +0200 Subject: [PATCH 2/2] fix(StatusDot): export the component from package --- .betterer/.betterer.results | 2 +- src/components/index.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.betterer/.betterer.results b/.betterer/.betterer.results index 41c08de0a..c6e446f5e 100644 --- a/.betterer/.betterer.results +++ b/.betterer/.betterer.results @@ -11,7 +11,7 @@ exports[`no more deprecated components`] = { "../src/components/FlexContainer/index.ts:1246547685": [ [0, 0, 59, "\'./FlexContainer\' import is restricted from being used by a pattern. FlexContainer is deprecated. Please use Layout primitives instead.", "3330215570"] ], - "../src/components/index.ts:3740729044": [ + "../src/components/index.ts:3052257943": [ [18, 0, 32, "\'./FlexContainer\' import is restricted from being used by a pattern. FlexContainer is deprecated. Please use Layout primitives instead.", "726759703"] ] }` diff --git a/src/components/index.ts b/src/components/index.ts index 695cbc816..0ed009616 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -32,6 +32,7 @@ export * from './Signal'; export * from './SingleDatePicker'; export * from './SortableList'; export * from './Spinner'; +export * from './StatusDot'; export * from './Stepper'; export * from './Table'; export * from './Tabs';