@xyo-network/react-shared 2.26.35 → 2.26.38

package/dist/docs.json

@@ -10,7 +10,7 @@
 			"fileName": "index.ts",
 			"line": 1,
 			"character": 0,
-			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/7efa6fa/packages/shared/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/c31a96d/packages/shared/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -87,5 +87,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.35"
+  "version": "2.26.38"
 }

package/src/SizeProp.ts

@@ -0,0 +1 @@
+export type SizeProp = 'small' | 'medium' | 'large'

package/src/components/Ampersand.tsx

@@ -0,0 +1,9 @@
+import { Typography, TypographyProps } from '@mui/material'
+
+export const Ampersand: React.FC<TypographyProps> = (props) => {
+  return (
+    <Typography marginX={1} component="span" {...props}>
+      &amp;
+    </Typography>
+  )
+}

package/src/components/BasicHero/BasicHero.stories.tsx

@@ -0,0 +1,58 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { BasicHero } from './BasicHero'
+import BackgroundImage from './default-desktop.svg'
+const StorybookEntry = {
+  argTypes: {},
+  component: BasicHero,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/BasicHero',
+} as ComponentMeta<typeof BasicHero>
+
+const Template: ComponentStory<typeof BasicHero> = (args) => (
+  <BrowserRouter>
+    <BasicHero {...args}></BasicHero>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {
+  button1Text: 'Button 1',
+  button1To: '',
+  button2Text: 'Button 2',
+  button2To: '',
+  desc: ' Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus!',
+  gradientTitle: 'dolor',
+  subLinkPath: 'https://medium.com/xyonetwork/xyo-2-0-has-arrived-fe160f8b2928',
+  subLinkText1: 'We just announced XYO 2.0',
+  subLinkText2: 'Read more here.',
+  title: 'Lorem ipsum',
+}
+const WithBackgroundImage = Template.bind({})
+WithBackgroundImage.args = {
+  backgroundImage: BackgroundImage,
+  button1Text: 'Button 1',
+  button1To: '',
+  button2Text: 'Button 2',
+  button2To: '',
+  desc: ' Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus!',
+  gradientTitle: 'dolor',
+  subLinkPath: 'https://medium.com/xyonetwork/xyo-2-0-has-arrived-fe160f8b2928',
+  subLinkText1: 'We just announced XYO 2.0',
+  subLinkText2: 'Read more here.',
+  title: 'Lorem ipsum',
+  title2: 'adipisicing elit.',
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+
+export { Default, WithBackgroundImage }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/BasicHero/BasicHero.tsx

@@ -0,0 +1,162 @@
+import { Container, Grid, Typography } from '@mui/material'
+import { ButtonEx } from '@xylabs/react-button'
+import { FlexBoxProps, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import { LinkEx } from '@xylabs/react-link'
+import { ReactElement } from 'react'
+
+import { useGradientStyles, useIsMobile } from '../../hooks'
+
+export interface BasicHeroProps extends FlexBoxProps {
+  title: string
+  gradientTitle?: string
+  title2?: string
+  desc: string
+  button1Text?: string
+  button2Text?: string
+  button1To?: string
+  button2To?: string
+  button1Href?: string
+  button2Href?: string
+  subLinkText1?: string
+  subLinkText2?: string
+  heroImage?: string
+  subLinkPath?: string
+  subLinkIcon?: ReactElement
+  backgroundColor?: string
+  textColor?: string
+  backgroundImage?: string
+  sx?: Record<string, string>
+}
+
+interface SubLinkSectionProps {
+  subLinkText1?: string
+  subLinkText2?: string
+  subLinkPath?: string
+  subLinkIcon?: ReactElement
+  backgroundImageAlignment?: boolean
+}
+
+interface ButtonSectionProps {
+  href?: string
+  to?: string
+  buttonText?: string
+}
+const SubLinkSection: React.FC<SubLinkSectionProps> = ({ subLinkText1, subLinkText2, subLinkPath, subLinkIcon, backgroundImageAlignment }) => {
+  return (
+    <FlexGrowRow width="100%" sx={{ flexDirection: { md: 'row', xs: 'column' }, justifyContent: { md: backgroundImageAlignment ? 'flex-start' : 'center', xs: 'center' } }}>
+      {subLinkIcon ? <span>{subLinkIcon}&nbsp;</span> : null}
+      <Typography>{subLinkText1}&nbsp;</Typography>
+      <LinkEx href={subLinkPath} underline="always" target="_blank" color="inherit">
+        <Typography>{subLinkText2}</Typography>
+      </LinkEx>
+    </FlexGrowRow>
+  )
+}
+
+const ButtonSection: React.FC<ButtonSectionProps> = ({ href, to, buttonText }) => {
+  const isMobile = useIsMobile()
+  return (
+    <ButtonEx
+      fullWidth={true}
+      marginTop={1}
+      marginBottom={1}
+      marginRight={isMobile ? 2 : 1}
+      marginLeft={isMobile ? 2 : 0}
+      target={href ?? '_blank'}
+      to={to}
+      href={href}
+      color="primary"
+      variant="contained"
+      paddingX={3}
+      sx={{ display: href || to ? 'flex' : 'none' }}
+    >
+      {buttonText}
+    </ButtonEx>
+  )
+}
+
+export const BasicHero: React.FC<BasicHeroProps> = ({
+  backgroundImage,
+  title,
+  gradientTitle,
+  backgroundColor,
+  textColor,
+  desc,
+  heroImage,
+  title2,
+  subLinkText1,
+  subLinkText2,
+  subLinkPath,
+  button1Text,
+  button2Text,
+  button2To,
+  button1To,
+  button2Href,
+  button1Href,
+  subLinkIcon,
+  sx,
+  ...props
+}) => {
+  const isMobile = useIsMobile()
+  const { classes } = useGradientStyles()
+  return (
+    <FlexGrowCol
+      sx={{
+        backgroundImage: `url(${backgroundImage})`,
+        backgroundPosition: { lg: 'bottom', md: 'center left', xs: 'top left' },
+        minHeight: {
+          md: '500px',
+          sm: '400px',
+          xs: '200px',
+        },
+        ...(sx ?? {}),
+      }}
+      style={{
+        backgroundColor: backgroundColor ?? '',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        color: textColor ?? '',
+      }}
+      {...props}
+    >
+      <Container>
+        <Grid
+          container
+          justifyContent="center"
+          alignItems="center"
+          sx={{
+            alignItems: { xs: 'center' },
+            justifyContent: { xs: 'center' },
+          }}
+        >
+          <Grid item xs={12} sm={8} md={backgroundImage ? 6 : 8} lg={backgroundImage ? 6 : 8}>
+            <FlexGrowCol paddingY={2} sx={{ alignItems: { xs: backgroundImage && !isMobile ? 'flex-start' : 'center' } }}>
+              <Typography variant="h1" component="h1" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>
+                {title ? <span>{`${title} `}</span> : null}
+                {gradientTitle ? <span className={classes().heading}> {` ${gradientTitle}`}</span> : null}
+                {title2 ? <span>{` ${title2}`}</span> : null}
+              </Typography>
+              <Typography variant="body1" component="h2" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>
+                {desc}
+              </Typography>
+              <FlexGrowRow sx={{ flexDirection: { lg: 'row', xs: 'column' } }} width="100%" marginTop={1}>
+                <ButtonSection href={button1Href} to={button1To} buttonText={button1Text} />
+                <ButtonSection href={button2Href} to={button2To} buttonText={button2Text} />
+              </FlexGrowRow>
+              <SubLinkSection
+                subLinkIcon={subLinkIcon}
+                subLinkText1={subLinkText1}
+                subLinkText2={subLinkText2}
+                subLinkPath={subLinkPath}
+                backgroundImageAlignment={backgroundImage ? true : false}
+              />
+            </FlexGrowCol>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            {heroImage ? <img src={heroImage} width="100%" /> : null}
+          </Grid>
+        </Grid>
+      </Container>
+    </FlexGrowCol>
+  )
+}