@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

package/dist/src/components/molecules/PopularDocs/PopularDocsProps.ts

@@ -0,0 +1,6 @@
+import { type PopularDocsItemProps } from '../../atoms'
+
+export interface PopularDocsProps {
+  title: string
+  documents: PopularDocsItemProps[]
+}

package/dist/src/components/molecules/PopularDocs/index.ts

@@ -0,0 +1,2 @@
+export * from './PopularDocs'
+export * from './PopularDocsProps'

package/dist/src/components/molecules/PricingCard/PricingCard.scss

@@ -0,0 +1,186 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.pricing-card {
+  position: relative;
+  max-width: 400px;
+  border: solid 1px transparent;
+  list-style: none;
+
+  &.--selectable {
+    .pricing-card__radio-label {
+      cursor: pointer;
+    }
+
+    &:not(.--selected):hover {
+      .pricing-card__wrapper {
+        border-color: get-color(neutral, neutral-3);
+      }
+    }
+  }
+
+  &.--selected {
+    .pricing-card__wrapper {
+      border-color: get-color(primary, main-light-3);
+    }
+  }
+
+  &__radio-label {
+    .radio-input {
+      display: none;
+
+      & + .radio-checkbox {
+        background-color: get-color(others, white);
+        position: absolute;
+        top: 1rem;
+        left: 1rem;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 1px solid;
+      }
+
+      &:checked {
+        & + .radio-checkbox {
+          border: 5px solid get-color(primary, main-light-1);
+        }
+      }
+    }
+  }
+
+  &__wrapper {
+    background-color: get-color(others, white);
+    box-shadow: $box-shadow-container;
+    border-radius: $global-border-radius;
+    border: solid 1px transparent;
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      margin-top: 0.5rem;
+
+      li {
+        text-align: left;
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 2rem;
+
+        p {
+          text-align: left;
+        }
+
+        img {
+          width: 2.2rem;
+          height: 2.2rem;
+          margin-right: 1rem;
+        }
+      }
+    }
+  }
+
+  &__header {
+    padding: 1rem;
+    text-align: center;
+    background: get-color(neutral, neutral-6);
+
+    &__text {
+      color: get-color(neutral, neutral-2);
+      margin: 0 1rem;
+    }
+  }
+
+  &__body {
+    color: get-color(neutral, neutral-1);
+    display: flex;
+    flex-flow: column nowrap;
+    padding: 1.5rem 1rem;
+    text-align: center;
+
+    &__price {
+      font-size: 2.25rem;
+      line-height: 2rem;
+      margin-top: 0;
+      margin-bottom: 1.5rem;
+      order: 2;
+
+      @include desktop {
+        font-size: 2.25rem;
+        line-height: 2.5rem;
+      }
+
+      span {
+        font-size: 1rem;
+        display: inline;
+        margin-left: 0.2rem;
+      }
+    }
+
+    &__text {
+      font-size: 0.85rem;
+      color: get-color(neutral, neutral-2);
+      order: 4;
+    }
+
+    &__features-list {
+      display: none;
+      order: 6;
+
+      @include landscape-tablets {
+        display: block;
+      }
+
+      &.--expanded {
+        display: block;
+      }
+
+      hr {
+        width: 100%;
+        border-top: 1px solid get-color(neutral, neutral-4);
+        margin-bottom: 1.5rem;
+      }
+
+      &__item {
+        &::before {
+          content: '\2022';
+          color: get-color(primary);
+          font-weight: bold;
+          display: inline-block;
+          margin-right: 1rem;
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 1rem;
+        }
+      }
+    }
+
+    .e-button.see-more-button {
+      display: block;
+      margin: auto;
+      order: 8;
+
+      @include landscape-tablets {
+        display: none;
+      }
+    }
+  }
+
+  &__disclaimer {
+    color: get-color(neutral, neutral-2);
+    font-size: 0.75rem;
+    text-align: center;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 0.8rem 0 0.4rem;
+    max-width: 20rem;
+
+    @include landscape-tablets {
+      max-width: unset;
+    }
+  }
+
+  &__button {
+    width: 100%;
+  }
+}

package/dist/src/components/molecules/PricingCard/PricingCard.tsx

@@ -0,0 +1,126 @@
+import React, { type FC, useState } from 'react'
+
+import { Button, Message } from '../../atoms'
+import { type PricingCardProps } from './PricingCardProps.types'
+// import './PricingCard.scss'
+
+const PricingCard: FC<PricingCardProps> = ({
+  order,
+  subscriptionId,
+  onChangeRadio,
+  isChecked = false,
+  planName,
+  price,
+  currency,
+  underPricingText,
+  featuresList = [],
+  children,
+  disclaimer,
+  message,
+  cardButton
+}) => {
+  const [cardState, setCardState] = useState({ expanded: false })
+  if (
+    planName === undefined ||
+    (onChangeRadio != null && subscriptionId === undefined) ||
+    (featuresList?.length === 0 && children === undefined)
+  ) {
+    return null
+  }
+  const isSelectableCard = onChangeRadio != null
+  const selectableCardClass = isSelectableCard ? '--selectable' : ''
+  const selectedCardClass = isSelectableCard && isChecked ? '--selected' : ''
+  const expandedContentClass = cardState.expanded ? '--expanded' : ''
+
+  const style = {
+    order: order ?? 0
+  }
+
+  const toggleCardContent = (): void => {
+    setCardState((prevState) => {
+      prevState = { expanded: !prevState.expanded }
+      return { ...prevState }
+    })
+  }
+
+  const renderMoreMobileButton = (
+    <Button
+      dataQa=''
+      givenClass='see-more-button'
+      color='tertiary'
+      label={cardState.expanded ? 'See less' : 'See more'}
+      noLink
+      onClick={toggleCardContent}
+    />
+  )
+
+  const renderHeaderContent = (
+    <div className='pricing-card__header'>
+      <h5 className={'sans-serif --big pricing-card__header__text'}>
+        <strong>{planName}</strong>
+      </h5>
+    </div>
+  )
+
+  const renderBodyContent = (
+    <div className='pricing-card__body'>
+      {Boolean(price) && (
+        <div className={'sans-serif pricing-card__body__price'}>
+          <strong>{price}</strong>
+          <span>{currency}</span>
+          {Boolean(underPricingText) && <div className={'pricing-card__body__text'}>{underPricingText}</div>}
+        </div>
+      )}
+      {Boolean(featuresList?.length) && (
+        <div className={`pricing-card__body__features-list ${expandedContentClass}`}>
+          <hr />
+          <ul>
+            {featuresList?.map((feature) => (
+              <li key={'feature-item-' + feature} className='pricing-card__body__features-list__item'>
+                {feature}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {children}
+      {featuresList != null && renderMoreMobileButton}
+      {cardButton}
+      {message != null && <Message {...message} />}
+    </div>
+  )
+
+  return (
+    <li style={style} className={`pricing-card grid__column ${selectableCardClass} ${selectedCardClass}`}>
+      <div className={'pricing-card__wrapper'}>
+        {isSelectableCard ? (
+          <label className='pricing-card__radio-label' data-qa={planName}>
+            <input
+              className='radio-input'
+              type='radio'
+              value={subscriptionId}
+              onChange={onChangeRadio}
+              name='pricing'
+              checked={isChecked}
+            />
+            <span className='radio-checkbox'></span>
+            {renderHeaderContent}
+            {renderBodyContent}
+          </label>
+        ) : (
+          <>
+            {renderHeaderContent}
+            {renderBodyContent}
+          </>
+        )}
+      </div>
+      {Boolean(disclaimer) && (
+        <div className='pricing-card__disclaimer'>
+          <small>{disclaimer}</small>
+        </div>
+      )}
+    </li>
+  )
+}
+
+export default PricingCard

package/dist/src/components/molecules/PricingCard/PricingCardProps.types.ts

@@ -0,0 +1,17 @@
+import { type MessageProps } from '../../atoms'
+
+export interface PricingCardProps {
+  order?: number
+  subscriptionId?: string
+  onChangeRadio?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  isChecked?: boolean
+  planName?: string
+  price?: string
+  currency?: string
+  underPricingText?: string
+  featuresList?: string[]
+  children?: React.ReactNode
+  disclaimer?: string
+  message?: MessageProps
+  cardButton?: any
+}

package/dist/src/components/molecules/PricingCard/index.ts

@@ -0,0 +1,2 @@
+export { default as PricingCard } from './PricingCard'
+export { type PricingCardProps } from './PricingCardProps.types'

package/dist/src/components/molecules/Snackbar/Snackbar.scss

@@ -0,0 +1,135 @@
+@import '../../../globalStyles/functions';
+
+.snackbar {
+  color: get-color(neutral, main);
+  line-height: 1.5;
+  margin-bottom: 1em;
+  padding: 0.5em 0 0.5em 0;
+  margin-right: 2%;
+  margin-left: 2%;
+  width: 96%;
+  transition: transform 1s;
+  z-index: 10000;
+  overflow: hidden;
+  border-radius: 4px;
+  box-shadow: $box-shadow-container;
+  font-size: 14px;
+
+  @include portrait-tablets {
+    margin: 0;
+    width: 18rem;
+  }
+  @include landscape-tablets {
+    width: 27rem;
+  }
+  @include laptop {
+    width: 36rem;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    float: left;
+    margin: space(5) space(3) 0 space(3);
+    @include portrait-tablets {
+      margin: space(3) space(3) 0 space(3);
+    }
+  }
+
+  &-close-icon {
+    cursor: pointer;
+    float: right;
+    font-size: 1.25rem;
+    line-height: 3;
+    margin-left: 1em;
+    margin-right: 1em;
+    opacity: 0.8;
+    @include portrait-tablets {
+      line-height: 2;
+    }
+  }
+
+  &--welcome {
+    background-color: get-color(neutral, main);
+    color: get-color(others, white);
+    border: 1px solid get-color(neutral, neutral-2);
+
+    &:before {
+      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMjAgMkg0Yy0xLjEgMC0yIC45LTIgMnYxOGw0LTRoMTRjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptMCAxNEg2bC0yIDJWNGgxNnYxMnpNNyA5aDJ2Mkg3Vjl6bTQgMGgydjJoLTJWOXptNCAwaDJ2MmgtMlY5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPG1hc2sgaWQ9InByZWZpeF9fYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3ByZWZpeF9fYSIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8ZyBmaWxsPSIjNUREOEMzIiBtYXNrPSJ1cmwoI3ByZWZpeF9fYikiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K)
+        no-repeat;
+    }
+  }
+
+  &--success {
+    background-color: var(--primary-main-light-3);
+    color: var(--primary-main-dark-1);
+    border: 1px solid var(--primary-main-light-2);
+
+    &:before {
+      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNOC44IDE1LjlMNC42IDExLjcgMy4yIDEzLjEgOC44IDE4LjcgMjAuOCA2LjcgMTkuNCA1LjN6Ii8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICA8bWFzayBpZD0icHJlZml4X19iIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcHJlZml4X19hIi8+CiAgICAgICAgPC9tYXNrPgogICAgICAgIDxnIGZpbGw9IiMwMjM3NEEiIG1hc2s9InVybCgjcHJlZml4X19iKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=)
+        no-repeat;
+    }
+  }
+
+  &--error {
+    background-color: get-color(error, main);
+    color: get-color(others, white);
+    border: 1px solid get-color(error, error-2);
+
+    &:before {
+      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6bS0xLTloMnY2aC0ydi02em0wLTRoMnYyaC0yVjd6IiAvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6IiAvPgogICAgICAgIDxtYXNrIGlkPSJwcmVmaXhfX2IiIGZpbGw9IiNmZmYiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2EiIC8+CiAgICAgICAgPC9tYXNrPgogICAgICAgIDx1c2UgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjcHJlZml4X19hIiAvPgogICAgICAgIDxnIGZpbGw9IiNGRkYiIG1hc2s9InVybCgjcHJlZml4X19iKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiIC8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)
+        no-repeat;
+    }
+  }
+
+  &--reminder {
+    background-color: var(--secondary-main);
+    color: get-color(neutral, main);
+    border: 1px solid var(--secondary-main-dark-1);
+
+    &:before {
+      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMjAgMkg0Yy0xLjEgMC0yIC45LTIgMnYxOGw0LTRoMTRjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptMCAxNEg2bC0yIDJWNGgxNnYxMnpNNyA5aDJ2Mkg3Vjl6bTQgMGgydjJoLTJWOXptNCAwaDJ2MmgtMlY5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPG1hc2sgaWQ9InByZWZpeF9fYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3ByZWZpeF9fYSIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8ZyBmaWxsPSIjOTM2QzJGIiBtYXNrPSJ1cmwoI3ByZWZpeF9fYikiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K)
+        no-repeat;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+
+    &__text-container {
+      display: flex;
+      flex-direction: column;
+      margin-right: 1rem;
+      min-width: 1%;
+    }
+
+    &__button button {
+      margin-top: 0.5rem;
+      height: auto !important;
+
+      label {
+        white-space: nowrap;
+      }
+    }
+
+    @include landscape-tablets {
+      flex-direction: row;
+      margin-top: inherit;
+    }
+  }
+
+  &-title {
+    font-weight: bold;
+  }
+
+  .e-button.remove-yellow {
+    border-color: transparent;
+
+    &:hover {
+      background-color: get-color(others, white);
+    }
+  }
+}

package/dist/src/components/molecules/Snackbar/Snackbar.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { type FC, useEffect, useState } from 'react'
+import classNames from 'classnames'
+
+import { Button } from '../../atoms'
+import { type SnackbarProps } from './SnackbarProps.types'
+// import './Snackbar.scss'
+
+const Snackbar: FC<SnackbarProps> = ({
+  type,
+  title,
+  text,
+  button,
+  dismissTimeout = 1000,
+  autoDismissTimeout,
+  autoDismiss,
+  onDismiss,
+  onAutoDismiss
+}: SnackbarProps) => {
+  const [snackbarOpen, changeSnackbarOpen] = useState<boolean>()
+
+  useEffect(() => {
+    setTimeout(() => {
+      changeSnackbarOpen(true)
+    })
+    if (autoDismiss ?? false) {
+      setTimeout(() => {
+        if (onAutoDismiss != null) onAutoDismiss()
+        closeSnackbar()
+      }, autoDismissTimeout)
+    }
+  }, [])
+
+  if (title === null && text === null) return null
+
+  const closeSnackbar = (): void => {
+    changeSnackbarOpen(false)
+    setTimeout(() => {
+      if (onDismiss != null) onDismiss()
+    }, dismissTimeout)
+  }
+
+  const classes = classNames('snackbar', {
+    'snackbar--welcome': type === undefined || type === 'welcome',
+    'snackbar--success': type === 'success',
+    'snackbar--error': type === 'error',
+    'snackbar--reminder': type === 'reminder',
+    active: snackbarOpen,
+    hidden: !(snackbarOpen ?? false)
+  })
+
+  return (
+    <div className={classes} aria-hidden='true'>
+      <span className='snackbar-close-icon' onClick={closeSnackbar} tabIndex={0}>
+        &times;
+      </span>
+      <div className='snackbar-content'>
+        <div className='snackbar-content__text-container'>
+          <p className='snackbar-title'>{title ?? ''}</p>
+          <p className='snackbar-text'>{text ?? ''}</p>
+        </div>
+        {button?.color !== null && Boolean(button?.label) && (
+          <div className='snackbar-content__button'>
+            <Button
+              label={button?.label ?? ''}
+              onClick={button?.onClick}
+              color={button?.color ?? 'primary'}
+              noLink
+              functionParameters=''
+              dataQa='back'
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Snackbar

package/dist/src/components/molecules/Snackbar/SnackbarProps.types.ts

@@ -0,0 +1,15 @@
+export interface SnackbarProps {
+  type?: 'welcome' | 'success' | 'error' | 'reminder'
+  title?: string
+  text?: string
+  button?: {
+    label: string
+    onClick: (functionParameters?: any) => void
+    color: 'primary' | 'primary2' | 'primary3'
+  }
+  dismissTimeout?: number
+  autoDismissTimeout?: number
+  autoDismiss?: boolean
+  onDismiss?: () => void
+  onAutoDismiss?: () => void
+}

package/dist/src/components/molecules/Snackbar/index.ts

@@ -0,0 +1,2 @@
+export { default as Snackbar } from './Snackbar'
+export { type SnackbarProps } from './SnackbarProps.types'

package/dist/src/components/molecules/StepGetForm/StepGetForm.scss

@@ -0,0 +1,105 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.homeStepsItem {
+  border-radius: $global-border-radius;
+  display: flex;
+  max-width: 100%;
+  padding: 2rem;
+  flex-flow: row nowrap;
+  min-width: 100%;
+  width: 100%;
+  align-items: flex-start;
+  text-align: center;
+  background: get-color(others, white);
+  box-shadow: $box-shadow-medium;
+  border: $global-border-radius;
+  margin-right: 0.5rem;
+  margin-bottom: 1rem;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @include portrait-tablets {
+    padding: 1.5rem;
+  }
+  @include landscape-tablets {
+    max-width: calc(100% / 3 - 0.5rem);
+    min-width: calc(100% / 3 - 0.5rem);
+    padding: 1.5rem;
+    height: 342px;
+    flex-flow: column nowrap;
+  }
+  @include laptop {
+    margin-right: 0;
+    max-width: calc(100% / 3 - 1rem);
+    min-width: calc(100% / 3 - 1rem);
+  }
+
+  .step__information {
+    text-align: left;
+    max-width: 50%;
+    align-self: center;
+
+    @include landscape-tablets {
+      max-width: 100%;
+      text-align: center;
+      margin-top: 0;
+    }
+
+    &_title {
+      font-weight: bold;
+    }
+  }
+
+  .step__image {
+    display: flex;
+    justify-content: center;
+    max-width: 7.5rem;
+    text-align: center;
+    width: 50%;
+    align-self: center;
+    padding-bottom: 0;
+    margin: 0 auto;
+    @include portrait-tablets {
+      padding-bottom: 2.5rem;
+    }
+    @include laptop {
+      margin-top: 2rem;
+    }
+
+    @include landscape-tablets {
+      width: 100%;
+    }
+  }
+
+  .gatsby-image-wrapper {
+    width: 88px;
+    @include portrait-tablets {
+      height: 88px;
+    }
+
+    img {
+      height: 100%;
+    }
+  }
+
+  p {
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+    @include portrait-tablets {
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  small {
+    color: get-color(neutral, neutral-2);
+  }
+
+  &:not(:first-child) {
+    .gatsby-image-wrapper {
+      width: 100%;
+    }
+  }
+}

package/dist/src/components/molecules/StepGetForm/StepGetForm.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { type StepGetFormProps } from './StepGetFormProps.types'
+// import './StepGetForm.scss'
+
+const StepGetForm: React.FC<StepGetFormProps> = ({ description, title = '', image }) => {
+  return (
+    <div className='homeStepsItem'>
+      {image != null && <div className={'step__image'}>{image}</div>}
+      <div className={'step__information'}>
+        <p className={'step__information__title sans-serif --big'}>{title}</p>
+        <small className={'sans-serif --small'}>{description}</small>
+      </div>
+    </div>
+  )
+}
+
+export default StepGetForm