feat: org text component

Author: steven11329

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeinventor/dasiot-react-component-lib",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [

src/components/OrgText/OrgText.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import OrgText, { OrgTextProps } from '.';
+
+export default {
+  title: 'Components/OrgText',
+  component: OrgText,
+  argTypes: {},
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+} as Meta;
+
+const Template: Story<OrgTextProps> = (args) => <OrgText {...args} />;
+
+export const Default: Story<OrgTextProps> = Template.bind({});
+
+Default.args = {
+  orgName: 'BeeInventor',
+};
+
+export const SpecificColor: Story<OrgTextProps> = Template.bind({});
+
+SpecificColor.args = {
+  ...Default.args,
+  orgColor: '#58B99E',
+};

src/components/OrgText/index.tsx

@@ -0,0 +1,49 @@
+import { styled, Box, BoxProps } from '@mui/material';
+import React from 'react';
+
+interface ContainerProps {
+  orgColor: string | undefined;
+}
+
+const shouldForwardProp = (propName: PropertyKey) => propName !== 'orgColor';
+const Container = styled(Box, { shouldForwardProp })<ContainerProps>`
+  display: inline-flex;
+  align-items: center;
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: 500;
+  color: ${({ theme }) => theme.color.secondary.$100};
+  padding: 4px 15px 4px 0;
+
+  & > span.org-name {
+    &::before {
+      display: inline-block;
+      content: '';
+      width: 6px;
+      height: 0.875rem;
+      background-color: ${({ theme, orgColor }) =>
+        orgColor ? orgColor : theme.color.primary.$100};
+      border-radius: 3px;
+      margin-right: 8px;
+    }
+  }
+`;
+
+export interface OrgTextProps extends BoxProps {
+  orgColor: string | undefined;
+  orgName: string;
+}
+
+const OrgText: React.FC<OrgTextProps> = ({
+  orgColor,
+  orgName,
+  ...otherProps
+}) => {
+  return (
+    <Container orgColor={orgColor} {...otherProps}>
+      <span className="org-name">{orgName}</span>
+    </Container>
+  );
+};
+
+export default OrgText;

src/components/index.ts

@@ -10,3 +10,4 @@ export { default as DropdownColor } from './Dropdown/DropdownColor';
 export { default as DatePicker } from './DatePicker';
 export { default as Step } from './Step';
 export { default as SearchTextField } from './SearchTextField';
+export { default as OrgText } from './OrgText';